问如何将li元素放在同一行上？
EN

Stack Overflow用户

提问于 2020-10-05 03:00:35

回答 1查看 60关注 0票数 0

我尝试将所有li元素放在同一行上并分隔(左、中、右)，但在输出中，它们是分开的，但都在不同的行上。

<ul style="font-size:35px; list-style-type: none; display: inline">
   <li style="text-align: left;">Plantel</li>
   <li style="text-align: center;">Estádio</li>
   <li style="text-align: end;">Palmarés</li>
</ul>

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-05 03:03:22

Display inline仅影响您添加到的直接元素的子元素，因此您的ul内联到它的父元素。您可以使用display flex来解决这个问题，而空格键可以解决您想要的对齐方式。

.list {
  display: flex;
  justify-content: space-between;
  font-size: 35px; 
  list-style-type: none;
  padding: 0;
}

<ul class="list">
   <li>Plantel</li>
   <li>Estádio</li>
   <li>Palmarés</li>
</ul>

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64198697

复制

相似问题

问如何将li元素放在同一行上？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将li元素放在同一行上？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将li元素放在同一行上？
EN