时间戳

首页 > 解决方案 > 如何在 HTML 中水平排列列表

html - 如何在 HTML 中水平排列列表

问题描述

我是前端开发的初学者，但据我所知，“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/

标签： htmltwitter-bootstraplayout

解决方案

我已经检查了源代码和你的.head_green_btnset width: 60%。

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

试试这个，我已经在 chrome web 控制台上测试了它，它工作得很好

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

推荐阅读