Question

我总是按照这种方法来集中一堆物品，所有物品都有一些余量

li {
  float: left;
  margin: 50px;
}
ul {
  width: 420px;
  margin: auto;
}

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

这个问题是，它也为最后一个项目添加了边距，因此它看起来并不完美。我希望第一个项目位于ul的最开头，最后一个项目位于ul的末尾，如何制作此内容？

Answer 1

您可以使用 Flexbox 和justify-content: space-between;

＆＃13;

ul {
  width: 400px;
  border: 1px solid black;
  margin: 10px auto;
  display: flex;
  list-style-type: none;
  justify-content: space-between;
  padding: 0;
}

＆＃13;

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

＆＃13;

Answer 2

你可以这样做https://jsfiddle.net/07x0xyL3/2/

  li {
   float:left;
   margin: 50px 0 50px 100px;
  }
  li:first-child {
    margin: 50px 0;
  }

浏览器支持http://htmlbook.ru/css/first-child

Answer 3

您可以尝试li:first-child {...}和li:last-child {...}。希望这可以帮助。

Answer 4

Flexbox的答案宽度为 display: flex ，然后不需要花车

但如果你想要遗产（通用），请display: table-cell

List centered

Answer 5

完美的解决方案是使用flexbox：

ul{
  list-style: none;
  width: 500px;
  margin: 10px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #FF9898;
  padding: 25px 0;
}
li{
  padding: 5px;
  background-color: #EFEFEF; 
}

<ul>
  <li>This is Item</li>
  <li>This is Item</li>
  <li>This is Item</li>
  <li>This is Item</li>
</ul>

Answer 6

将此代码添加到CSS部分

li:first-child{margin-left: 0px;}
li:last-child{margin-right: 0px;}

Answer 7

删除float将inline-block添加到li，将white-space: nowrap添加到ul

＆＃13;

li {
  margin: 50px;
  display: inline-block;
}
ul {
  width: 400px;
  margin: auto;
  white-space: nowrap
}

＆＃13;

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

＆＃13;

中心li而没有为最后一项添加保证金？

7 个答案: