gpt4 book ai didi

html - 如何给 ul nav tabs 宽度空间但仍然向左浮动

转载 作者:行者123 更新时间:2023-11-28 11:19:02 27 4
gpt4 key购买 nike

我有一个用于导航选项卡的无序列表。我希望它们之间有空格,但我也希望列表的开头与左侧的其余文本对齐。

我知道这很简单,但我想不通。

http://jsfiddle.net/29g9S/3/

<body>


<div class="page-box">
<p>I am trying to get the ul's li's to line up with the "My Blog" text and still flow with the document</p>


<h1>My Blog</h1>

<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>



</div>


</body>

CSS

.page-box{
position:relative;
left:50px;
}

ul{

position:relative;
left:0px;
}

ul>li{
float:left;
position:relative;
margin-left:100px;
list-style-type:none;
}

最佳答案

关键是取消 ul 上的 margin/padding:

.page-box{
position:relative;
left:50px;
}

ul{
position:relative;
margin:0;
padding:0;
}

ul>li{
display:inline-block;
position:relative;
margin:0 100px 0 0;
list-style-type:none;
}

Here is an updated jsFiddle .请注意使用 display:inline-block; 而不是 float:left;。花车是前往老韦伯维尔的单程票!拥抱 display:inline-block 的奇迹吧! :D

关于html - 如何给 ul nav tabs 宽度空间但仍然向左浮动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21632345/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com