如何在 HTML 中水平排列列表答案

【问题标题】：How to arrange a list horizontally in HTML如何在 HTML 中水平排列列表
【发布时间】：2020-09-04 23:14:21
【问题描述】：

我是前端开发的初学者，但据我所知，“li”项通常是垂直布局的。我曾经使用 'float' 进行水平布局或 Bootstraps 'col'。但是这个使用 'ul' 和 'li' 同时代码很简短，结果看起来很整洁。谁能帮我解释一下它是如何实现的？

<div _ngcontent-c5="" class="col-sm-12">
<div _ngcontent-c5="" class="home_green_btn">
<ul _ngcontent-c5="" class="ng-tns-c5-1">
<li _ngcontent-c5="" class="head_green_btn"><a _ngcontent-c5="" class="ng-tns-c5-1" href="/Start-a-Check">Start a new check</a></li>
<li _ngcontent-c5="" class="head_green_btn"><a _ngcontent-c5="" class="ng-tns-c5-1" href="/resume_a_check"> Resume a check </a></li>
<li _ngcontent-c5="" class="head_green_btn"><a _ngcontent-c5="" class="ng-tns-c5-1" href="/Track-a-Check"> Track a check </a></li>
<li _ngcontent-c5="" class="head_green_btn"><a _ngcontent-c5="" class="ng-tns-c5-1" href="/Verify-a-Check">Verify a check</a></li></ul>
</div></div>

直播网址是：https://www.australiannationalcharactercheck.com.au/

【问题讨论】：

嗨奥利弗，欢迎来到 SO！ .ng-tns-c5-1 { columns: 4 } 可能会成功... CSS columns Property
@RenevanderLende 万岁，这是非常明确的答案。谢谢。

标签： html twitter-bootstrap layout

【解决方案1】：

我已经查看了源代码和您的.head_green_btn 设置width: 60%。

因此，如果您希望它位于同一行，则必须将其设置为 auto（或小于 100/(number of items) 的某个百分比值）

试试这个，我在 chrome web 控制台上测试过，效果很好

<div _ngcontent-c4="" class="head_green_btn" style="width:auto;padding: 0 10px">

【讨论】：

谢谢回复。但我认为'div'是块元素，所以如果宽度设置为自动，会不会像拉伸到全宽一样？