Question

如何使<div>标记中的列表居中？下面是我目前用于菜单的编码。

HTML

<div>
    <ul class="topnav" id="myTopnav">
        <li><a class="active" href="#home">HOME</a></li>
        <li><a href="#news">NEWS</a></li>
        <li><a href="#contact">CONTACT</a></li>
    </ul>
</div>

CSS

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #0d47a1;
    box-shadow: 0px 5px 10px #000;
    position: absolute;
    z-index: 10;
    width: 100%;
}
ul.topnav li {float: left; zoom: 1;}
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 40px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
    font-family: Calibri;
}
ul.topnav li a:hover {background-color: #1976d2;}

Answer 1

这是一个有效的版本，有点改变了CSS。它使用了设置宽度，但这很好，因为我们使用的是动态尺寸。

＆＃13;

* { box-sizing: border-box;}
div {
    background-color: #0d47a1;
    box-shadow: 0px 5px 10px #000;
    position: absolute;
    z-index: 10;
    left: 0;
  right: 0;
  display: block;
  }
ul.topnav {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    display: block;
  width: 25em;
}
ul.topnav li {display: inline-block;, text-align: center; min-width: 8em; }
ul.topnav li a {
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 1em;
    text-decoration: none;
    transition: 0.3s;
    font-size: 1.2em;
    font-family: Calibri;
}
ul.topnav li a:hover {background-color: #1976d2;}

＆＃13;

<div>
    <ul class="topnav" id="myTopnav">
        <li><a class="active" href="#home">HOME</a></li>
        <li><a href="#news">NEWS</a></li>
        <li><a href="#contact">CONTACT</a></li>
    </ul>
</div>

＆＃13;

制作中心<ul> <li> </li> </ul>标签

1 个答案: