如何在 ul 元素中水平对齐我的 li？答案

【问题标题】：How do I horizontally align my li's in an ul element?如何在 ul 元素中水平对齐我的 li？
【发布时间】：2018-04-10 20:57:00
【问题描述】：

我的问题是我无法弄清楚，无论我尝试什么，为什么<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;}

【问题讨论】：

标签： html css html-lists centering

【解决方案1】：

我认为你的 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 将在 flex 中的 li 周围放置空格。

.bottomUl {
    color: white;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;}

以下 CSS 将在 li 之间放置空格。如果你使用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 框 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

为了跨浏览器的兼容性。请访问以下链接，是否满足您的需求 https://caniuse.com/#feat=flexbox

希望这个答案对你有帮助:)

【讨论】：

谢谢，这几乎完成了这项工作，我现在遇到的唯一问题是当我希望
元素位于同一行时，它们是在彼此下方。

对不起，我的错。我没有考虑将 li 放在同一行。我更新了答案。

谢谢你，这完成了工作，非常感谢你付出的努力，因此你得到了答案。另外，我对 flex box 有一点了解，但你说得对，成为专家可以让我很好地设计我的网站，所以我会检查你的链接。再次感谢您，祝您有美好的一天：D

【解决方案2】：

试试这个 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】：

要使元素居中，您需要使用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 元素。我为你想出了解决方案：

<!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>

【讨论】：

我添加了你说的指定css，但它什么也没做？顺便说一句，列出“默认 CSS 值”而不是链接它们对您更有帮助，请编辑您的帖子并这样做，您可能会得到一些厚实，并对我更有帮助！
我为您添加了工作解决方案。 “您可以将 margin 属性设置为 auto 以在其容器内水平居中元素。”我想知道为什么它不适用于 li 元素。它适用于其他所有。我们需要对其进行调查。
我已经找到了一个解决方案，并把它标记得更远一点，它对我有用，但你是对的，调查它为什么不适用于 li 元素会很有趣，所以“Just Do It " :D