如何在 ul 元素中水平对齐 li？
[英]How do I horizontally align my li's in an ul element?
问题描述
我的问题是，无论我尝试什么，我都不知道为什么<li>不想居中。 注意：通过居中，我的意思是使三个<li>在我的<div>元素中水平居中。
我的代码：
<div class="bottomBar" id="bottomBar">
<ul class="bottomUl">
<li>
<span onclick="contactMe ();"> Contact Me </span>
</li>
<li>
<span> Help </span>
</li>
<li>
<span> Social Media </span>
</li>
</ul>
</div>
和 CSS：
.bottomBar {margin-left: 18.0%; height: 80px; background-color: #555555; padding: 10px; box-shadow: 0px 1px 10px black; bottom: 0;}
.bottomUl {color: white; width: 10%; list-style-type: none; margin: 0px; display: block;}
.bottomUl li span {font-family: 'Montserrat-Regular';}
.buttonUl li {height: 100px; width: 100px; border: 1px solid red; display: inline-block;}
.bottomUl span:hover {cursor: pointer; color: red; text-shadow: 1.5px 1.5px black;}
3 个解决方案
解决方案1
5 已采纳 2017-10-29 22:40:37
我认为你的ul css 应该稍微改变一下。 删除width:10%并将text-align:center和padding:0到ul 。
.bottomUl {
color: white;
list-style-type: none;
margin: 0;
display: block;
padding: 0;
text-align: center;}
上述解决方案将使li垂直居中
编辑：1
如果您希望所有li都在同一行上。 你需要在 CSS 中探索flex 。 你的 css 应该像下面的ul
.bottomUl {
color: white;
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;}
上面的 CSS 将使li的中心居中。 justify-content属性将帮助您根据需要在 flex 中放置元素。
下面的 CSS 将在li的 flex 周围放置空间。
.bottomUl {
color: white;
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;}
以下 CSS 将在li之间放置空格。 如果您在弹性项目space-between使用space-between 。
.bottomUl {
color: white;
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;}
以下 CSS 将均匀地间隔li 。 如果您使用space-evenly属性来justify-content
.bottomUl {
color: white;
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-evenly;}
我想建议在以下链接中更多地探索flex box https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
为了跨浏览器兼容性。 请访问以下链接，是否满足您的需求https://caniuse.com/#feat=flexbox
希望这个回答对你有帮助:)
解决方案2
0 2017-10-29 22:31:23
试试这个css。
.bottomBar {margin-left: 18.0%; height: 80px; background-color: #555555; padding: 10px; box-shadow: 0px 1px 10px black; bottom: 0;}
.bottomUl {color: white; width: 100%; list-style-type: none; margin: 0px; display: block; text-align: center;}
.bottomUl li span {font-family: 'Montserrat-Regular';}
.bottomUl li {height: 100px; width: 100px; border: 1px solid red; display: inline-block;}
.bottomUl span:hover {cursor: pointer; color: red; text-shadow: 1.5px 1.5px black;}
我做了什么：
- 将“.buttonUl li”更改为“.bottomUl li”
- 更改了“宽度：10%；” 到'宽度：100%;' .bottomUl 下
- 添加了“文本对齐：居中；” .bottomUl 下
解决方案3
0 2017-10-29 22:54:33
要使元素居中，您需要使用margin: auto css 属性。 只需检查下面的示例代码。 div 将在其父级内居中，并占据 80% 的宽度。 ul 元素也会发生同样的情况。
div{
width: 80%;
margin: auto;
}
li{
list-style-type: none;
display: inline-block;
}
ul{
width: 80%;
margin: auto;
}
如果您希望它真正居中，请确保您记住 DOM 元素的默认 CSS 属性：
https://www.w3schools.com/cssref/css_default_values.asp
在 HTML 元素的默认 CSS 值中，关注边距和填充。 要完全控制布局，只需使用以下内容：
*{
margin: 0;
padding: 0;
}
all * 选择器将确保将所有元素的填充和边距设置为 0。
我想知道为什么margin: auto; 不适用于 li elemets。 我为你找到了解决方案：
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 80%;
margin: auto;
background-color: yellow;
}
li {
list-style-type: none;
display: inline-block;
background-color: blue;
width: 32%;
}
ul {
width: 80%;
margin: auto;
background-color: purple;
}
</style>
</head>
<body>
<div class="bottomBar" id="bottomBar">
<ul class="bottomUl">
<li>
<span onclick="contactMe ();"> Contact Me </span>
</li>
<li>
<span> Help </span>
</li>
<li>
<span> Social Media </span>
</li>
</ul>
</div>
</body>
</html>
如何在ul中水平居中对齐li？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.