我试图让导航栏都在同一行,但导航栏中的最后一个 block 不起作用 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;
}
最佳答案
添加 box-sizing: border-box;
将解决您通过添加 box-sizing: border-box 增加
width
的填充问题;padding
是从内部给出的
还可以将 ul
width
设置为 100%
如果你想让它全屏,li
应该为 33.33%
为您移除 left
-ve margin
#navbar
并添加 margin:0
因为它将移除浏览器给出的默认 margin
关于html - 导航栏最后一项没有正确 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27372975/