gpt4 book ai didi

css - 在
内的
    内水平居中/均匀分布

转载 作者:技术小花猫 更新时间:2023-10-29 10:06:26 30 4
gpt4 key购买 nike

有一个导航栏 <div> ,里面是一个<ul>每个 <li>包含 <a>带有链接(这是用于导航栏)

我查看了 Google 和这个网站,但找不到我要找的东西。

我想要的是能够保持我当前的风格(使用 <li><a> 在里面),我想要 <li><ul> 内均匀分布和居中(如果它们均匀分布,这部分自然会出现......) (在导航栏内 <div> )。

无论如何,如果这没有意义请告诉我,目前它们只是左对齐...这就是我所拥有的:

HTML:

<div class="navbar">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
<li><a href="Contact">Contact Us</a></li>
<li><a href="About">About Us</a></li>
</ul>
</div>

CSS:

.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0px;
padding: 0px;
width: 90%;
overflow: hidden;
}
.navbar li{
float: left;
padding: 2px;
width: 150px;
margin-left: auto ;
margin-right: auto ;
}

如果有必要,我还可以包含我的 .navbar a{}。我是 CSS 的新手,所以放轻松,我也首先查看了 SO 和 Google,但找不到任何类似的东西(尽管也许因为我是新手,所以我没有意识到它是一样的)。

如果这是一个错误的 CSS 方法和/或有更简单、更常用的方法来执行此操作,请继续链接/发布它,但我更喜欢这种方式,因为它对我来说最有意义。

最佳答案

如果您不想指定 90% 宽度,这允许无宽度居中的动态 ul:

<!doctype html>
<div class="navbar">
<div id="for-ie">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
<li><a href="Contact">Contact Us</a></li>
<li><a href="About">About Us</a></li>
</ul>
</div>
</div>
<style>
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0 auto;
padding: 0px;
border:1px solid red;
display:table;
overflow: hidden;
}
.navbar li{
float: left;
padding: 2px;
width: 150px;
margin-left: auto ;
margin-right: auto ;
}
</style>
<!--[if IE]>
<style>
#for-ie { text-align:center; }
#for-ie ul { display:inline-block; }
#for-ie ul { display:inline; }
</style>
<![endif]-->

在 IE6、FX 3 中测试。

编辑:没有无关元素的替代样式:

<!doctype html>
<div class="navbar">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
<li><a href="Contact">Contact Us</a></li>
<li><a href="About">About Us</a></li>
</ul>
</div>
<style>
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
padding: 0px;
zoom:1;
border:1px solid red;
overflow: hidden;
}
.navbar li{
padding: 2px;
width: 150px;
display:inline-block;
}
</style>
<!--[if IE]>
<style>
.navbar li { display:inline; }
</style>
<![endif]-->

关于css - 在 <div> 内的 <ul> 内水平居中/均匀分布 <li>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3259612/

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