Question

在最后一个HTML <li>项目中IE和Firefox中显示的无序列表之后存在不需要的空间，无法通过减少ul宽度来删除。任何人都知道如何删除空间？感谢。

#menubar {
  width:249px;
  margin:0 auto;
  list-style:none;
  border:1px solid grey;
  border-radius:3px;
  margin-top:5px;
  padding:0;
  height:26px;
}	
.toggle {
  margin:0;
  line-height:16px;
  float:left;
  border-right: 1px solid grey;
  padding:5px 8px 5px 8px; 	
}
.selected {
  background-color:grey;		
}

<body>
  <ul id="menubar">
    <li class="toggle selected">HTML</li>
    <li class="toggle">HTML</li>
    <li class="toggle">HTML</li>
    <li class="toggle selected" style="border-right:none;">HTML</li>		
  </ul>
</body>

Answer 1

请勿在{{1}}上指定固定宽度，而是将其显示为ul。（如果你需要水平居中，那么在父元素上使用inline-block。）

text-align:center

div {
  text-align:center;
}
#menubar {
  display:inline-block;
  margin:0 auto;
  list-style:none;
  border:1px solid grey;
  border-radius:3px;
  margin-top:5px;
  padding:0;
  height:26px;
  text-align:left; /* reset text-align for list contents, if necessary */
}	
.toggle {
  margin:0;
  line-height:16px;
  float:left;
  border-right: 1px solid grey;
  padding:5px 8px 5px 8px; 	
}
.selected {
  background-color:grey;		
}

无序列表项后的空白空间

1 个答案: