Question

我正在尝试使用ul标记创建一个简单的菜单栏，该标记有4个链接。 ul宽度是屏幕宽度的100％，因此每个li应该是25％。

我已经尝试过这样做了，但是最后一个列表项只是落到了下一行.. 但是，如果我对每个li使用width:23%，它看起来会很好。但我很好奇为什么会这样，为什么25％不够好？

这是我的笔：

http://codepen.io/anon/pen/XKryKW 我将不胜感激任何帮助！感谢。

Answer 1

第一个：显示：内联块总是在块之间留下几个像素，所以它总是超过100％。你还要添加22px填充，使宽度：25％+ 22px + 22px（左和右）以避免这种使用box-sizing: border-box;

li {
  font-size:25px;
  padding: 22px;
  width:25%;
  text-align:center;
  float: left;
  display: block;
  box-sizing: border-box;
}`

https://jsfiddle.net/wietsedevries/kmzym3xL/

Answer 2

首先您需要从padding right and left删除lis，然后还需要将font-size:0添加到ul，以使其忽略lis之间的间距< / p>

*{
  
  margin:0;
  padding:0;
  
   
}
ul
{
  
  height:70px;
  background-color:#e1973d;
  list-style-type:none;
  width:100%;
  font-size:0;
}
li
{
 font-size:25px;
   padding: 22px 0;
  width:25%;
  text-align:center;
  display:inline-block
}

<ul>
  <li><a> first</a> </li>
 <li><a> second</a> </li>
   <li><a> third</a> </li>
     <li><a> fourth</a> </li>
</ul>

Answer 3

简单。你的html中有空格。内联块元素始终存在问题。删除它们，结果中的空格消失。请参阅此说明：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

http://codepen.io/ruchiccio/pen/YWKRVQ

<ul>
  <li><a> first</a></li><li><a> second</a></li><li><a> third</a></li><li><a> fourth</a></li>
</ul>

对齐具有相同宽度的列表项

3 个答案: