Question

我是网站设计的新手，我的导航栏中有一些我无法解决的缺陷。

我无法让导航栏正确居中。
当屏幕分辨率发生变化时，列表会溢出到下一行。
有一个列表元素的大小不同，我似乎无法弄清楚原因。

以下是代码：

CSS：

.nav_wrapper {
z-index: 9999;
padding: 0;
margin: 0;
width: 100%;
min-width: 50px;
}

.nav_wrapper ul {
display: block;
position: relative;
position: fixed;
/* fixes automatic values set by ul */
margin: 0; 
padding: 0;
}

.nav_wrapper ul li {
list-style: none;
display: list-item;
background-color: #993300;
float: left;
}

/* hides the submenu by default */
.nav_wrapper ul ul {
display: none;
position: absolute;
}

/* makes the sub menu appear on hover over list element */
.nav_wrapper ul li:hover > .sub_nav1 {
display: list-item;
list-style: none;
}

/* lists the list items on top of one another */
.nav_wrapper ul .sub_nav1 li {
float: none;
position: relative;
}

.nav_wrapper ul li a{
display: block;
text-decoration: none;
color: #ffffff;
padding: 12px;
}

.nav_wrapper li a:hover{
color: #000;
background-color: #ffffff;
}

/* Dropdown Menu arrow */
.nav_wrapper ul li > a:after { 
    content: '\25BE';           
}

.nav_wrapper ul li > a:only-child:after { 
    content: '';
}

HTML：

<body>

<!-- NAV -->
<div class="nav_wrapper">
    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Calandar</a></li>
        <li><a href="#">About Us</a>
        <ul class="sub_nav1">
            <li><a href="#">The Pastor</a></li>
            <li><a href="#">History</a></li>
            <li><a href="#">About Byzantines</a></li>
        </ul>
        </li>
        <li><a href="#">Mass Times</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
<div>

<!-- SECTION 1 -->

</body>

</html>

Answer 1

一旦你浮动li，那么居中就变得有问题了。在这些情况下，通常首选使用display:inline-block和中心，然后将text-align:center应用于父ul。

这确实有white-space的缺点，但有一些方法，其中一种（字体大小）我在这里使用过。

对于具有更高高度的单个元素......这是由伪元素引起的...所以在它上面打了一个快速补丁。坦率地说，我会将一个类应用于父li并在li上使用伪元素，但这完全是另一个辩论。

＆＃13;

body {
  font-family: 'Didact Gothic', sans-serif;
  padding: 0;
  margin: 0;
  background-color: #CCCCFF;
}
.nav_wrapper ul {
  display: block;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 0;
  /* remove whitespace */
}
.nav_wrapper ul li {
  list-style: none;
  display: inline-block;
  vertical-align: top;
  background-color: #993300;
  position: relative;
  font-size: 1rem;
  /* font-size reset */
}
/* hides the submenu by default */

.nav_wrapper ul ul {
  display: none;
  top: 100%;
  left: 0;
  position: absolute;
}
/* makes the sub menu appear on hover over list element */

.nav_wrapper ul li:hover > .sub_nav1 {
  display: block;
  width: 100%;
}
/* lists the list items on top of one another */

.nav_wrapper ul .sub_nav1 li {
  position: relative;
  width: 100%;
}
.nav_wrapper ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  padding: 12px;
}
.nav_wrapper li a:hover {
  color: #000;
  background-color: #ffffff;
}
/* Dropdown Menu arrow */

.nav_wrapper ul> li > a:after {
  content: '\25BE';
  line-height: 0;
}
.nav_wrapper ul li > a:only-child:after {
  content: '';
}

＆＃13;

<div class="nav_wrapper">
  <ul class="nav">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Calendar</a>
    </li>
    <li><a href="#">About Us</a>

      <ul class="sub_nav1">
        <li><a href="#">The Pastor</a>
        </li>
        <li><a href="#">History</a>
        </li>
        <li><a href="#">About Byzantines</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Mass Times</a>
    </li>
    <li><a href="#">Contact Us</a>
    </li>
  </ul>
  <div>

＆＃13;

Answer 2

嗯，我注意到如果我将25像素高度设置为

.nav_wrapper ul li a

删除了额外的空格，例如..

.nav_wrapper ul li a{
    height:25px;
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding: 12px;
}

https://jsfiddle.net/b02nm6ae/9/

HTML / CSS中的Navbar无法正常运行

2 个答案: