如何将ul列表对齐为中心的按钮

debugcn 发表于 Dev

狂野的杰德瑞克

晚上好，我正在练习制作标题和下方的按钮。我们已经为按钮准备好代码。我们的目标是将其放置在边框中，在这些按钮上制作标题，并使按钮和标题对齐中心。

我的代码现在看起来像这样

的CSS

ul {
    float:left;
    width: 70%;
    padding: 0;
    margin: auto;
    list-style: none;
}

li a {
    display: block;
    float: left;
    text-align: center;
    font-size: 1.2em;
    width: 130px;
    text-decoration: none;
    color: aqua;
    background-color: blue;
    padding: 10px 0px;
    margin: 0px 1px 1px 0px;
    border: 1px solid navy;
    border-radius: 3px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0px 2px 3px gray;
    -moz-box-shadow: 0px 2px 3px gray;
    -webkit-box-shadow: 0px 2px 3px gray;
}

li a:hover {
    color: blue;
    background: aqua;
    border: 1px solid blue;
}

.naglowek {
    align-content: center;
    text-align: center;
    border: 5px solid black;
    padding-bottom: 50px;
    height: 130px;
}

HTML：


<html>

<head>
    <link rel="stylesheet" href="style.css">
<title>Menu poziome</title>
</head>

<body>
<div class="naglowek">
    <h1>HEADER</h1>
<section>
<br>
<nav>
<ul>
<li><a href="1.html">SUBSITE 1</a></li>
<li><a href="2.html">SUBSITE 2</a></li>
<li><a href="3.html">SUBSITE 3</a></li>
<li><a href="4.html">SUBSITE 4</a></li>
</ul>
</nav>
</section>
</div>
</body>

</html>

按钮应该在标题下找到自己。如何才能使此列表/按钮居中？提前致谢！

炸玉米饼

我削减了您的代码以简化它。我知道，使用列表仍然经常使导航变得困难，但是不需要使用flexbox，grid或inline-blocks。另外，如果导航中已经将其包装，则无需将其包装到一个部分中。

在这种情况下，我只是使用了您的链接，并在其中放置了一个div来模拟一个按钮。它们设置为inline-block，并且tehrefor表现为“文本”（inline）。因此，可以很容易地与text-align: center;

.naglowek {
  text-align: center;
  border: 5px solid black;
  min-width: 600px;
  padding: 10px;
}

#navigation a div {
  display: inline-block;
  text-align: center;
  font-size: 1.2em;
  width: 130px;
  text-decoration: none;
  color: aqua;
  background-color: blue;
  padding: 10px 0px;
  margin: 0px 1px 1px 0px;
  border: 1px solid navy;
  border-radius: 3px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: 0px 2px 3px gray;
  -moz-box-shadow: 0px 2px 3px gray;
  -webkit-box-shadow: 0px 2px 3px gray;
}

#navigation a div:hover {
  color: blue;
  background: aqua;
  border: 1px solid blue;
}

<div class="naglowek">
  <div id="header"><h1>HEADER</h1></div>
  <div id="navigation">
    <a href="1.html"><div>SUBSITE 1</div></a>
    <a href="2.html"><div>SUBSITE 2</div></a>
    <a href="3.html"><div>SUBSITE 3</div></a>
    <a href="4.html"><div>SUBSITE 4</div></a>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。