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

Question

Good evening, I've got an exercise to make a Header and buttons under it.晚上好，我有一个练习来制作一个 Header 和下面的按钮。 We've got ready code for the buttons.我们已经为按钮准备好了代码。 Our goal is to put it in a border, make a header over these buttons and align buttons and header to center.我们的目标是将它放在边框中，在这些按钮上制作一个 header 并将按钮和 header 对齐到中心。

My code looks like this right now我的代码现在看起来像这样

CSS 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：


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

Buttons should find themself under header How could I center this list/buttons?按钮应该在 header 下找到它们自己我怎样才能将这个列表/按钮居中？ Thanks in advance!提前致谢！

Answer 1

I cut down your code to simplify it.我减少了您的代码以简化它。 I'm aware that navigation is still often tought with using a list, but with a well established use of flexboxes, grid or inline-blocks not needed.我知道使用列表导航仍然经常很困难，但是不需要很好地使用 flexboxes、grid 或 inline-blocks。 Also you dont need to wrap it into a section if it is already wrapped in navigation.如果它已经包含在导航中，则您也不需要将其包装到一个部分中。

In this case I just used your links and put a div inside to emulate a button.在这种情况下，我只是使用了您的链接并在其中放置了一个 div 来模拟一个按钮。 They are set to inline-block and tehrefor behave as "text" (inline).它们被设置为 inline-block 并且 tehref 表现为“文本”（内联）。 Therefor the can be easily aligned with text-align: center;因此可以很容易地与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>

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-11-15 17:19:10

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-11-15 17:19:10

解决方案1
1 已采纳 2020-11-15 17:19:10