Question

我试图让导航栏全部在同一行，但导航栏中的最后一个块没有用 HTML：

 <div id="navbar"><ul>
           <li>Home</li>
           <li id="title">Welcome to this website</li>
           <li>Sign up to get update to your inbox:<input type="text" placeholder="Type in your email adress"></input><input type="submit" value="submit"></intput></li>
 </ul></div>

的CSS：

#navbar li{
    display:block;
    float:left;
    font-size:25px;;
    height:30px;
    background-color:#D2A7F2;
    padding:20px;
    text-align:center;
    width:33%;
    border-right:2px solid #FF2508;
    border-bottom:2px solid #FF2508;

}

#navbar ul{
        list-style-type:none;
}

#navbar{
       overflow:hidden;
       margin-left:-40px;
}

Answer 1

添加box-sizing: border-box;将解决您给出填充的问题，通过添加width来增加box-sizing: border-box; padding来自内部

还要将ul width设置为100%，如果您想全屏显示，li应为33.33％

为您left删除-ve margin #navbar并添加margin:0，因为它会删除浏览器提供的默认margin

Answer 2

添加框大小以包含填充并将宽度增加到等于（接近）100％。

#navbar li {
    box-sizing: border-box;
    width: 33.33%
}

导航栏最后一项没有正确浮动

2 个答案: