Question

我试图用三个弹性框填充页面的宽度，但我无法弄清楚如何。柔性盒是正确的方法还是我应该做其他事情？我不想要任何空白区域。任何人吗？

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>SVG - Introduction</title>
        <link rel="stylesheet" href="svg.css"/>
    </head>

    <body>
        <main><h1>Main</h1></main>
        <nav>
            <ul>
                <li><p>Why</p></li>
                <li><p>How</p></li>
                <li><p>When</p></li>
            </ul>
        </nav>
        <footer><address>Address</address></footer>
    </body>

</html>

CSS：

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}
body {
    height:100%
}

main {
    height: 50%;
    width: 100%;
    background-color: #E1AD82;
}
nav {

    display: -webkit-flex;
   display: flex;

}

nav li {
   -webkit-flex: 1;
          flex: 1;
    background: blue;
    height:300px;
    display: inline-block;

}

小提琴：

http://jsfiddle.net/qwPER/

Answer 1

您需要在display:flex;和ul上设置li属性，而不是nav和li。这里ul是您唯一一个“弯曲”的框。

http://jsfiddle.net/qwPER/1/

如何用弹性框填充宽度

1 个答案: