Question

我有这个网站： [删除 - 问题解决] 如您所见，如果您查看导航栏，按钮不会填充它，从而使其看起来很难看。我想知道是否有办法计算按钮的宽度，无论我有多少按钮，它们总是会填满整个页面的宽度，因此只能看到它们下方的小条纹。这是CSS：

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: left;
}

a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #359DFF;
text-align: center;
padding:4px;
text-decoration: none;
text-transform: uppercase;
}

a:hover,a:active {
transition-property: background-color;
background-color: #33CCFF;
transition-duration: 1s;
}

.navbg {
background-color: #33CCFF;
position: absolute;
top: 70px;
width: 100%;
height: 32px;
z-index: -1;
}

Answer 1

只需更改li宽度

li {
width: 20%;
float: left;
}

Answer 2

此问题的解决方案在您的HTML中，您必须将其放入导航栏。

目前你有：

<header>
<h2>Liceul Teoretic Dunarea</h2>
    <ul>
     <li><a href="#">Acasa</a></li>
     <li><a href="#">Proiecte</a></li>
     <li><a href="#">Management</a></li>
     <li><a href="#">Profesori</a></li>
     <li><a href="#">Contact</a></li>
    </ul>
</header>
<div class="navbg">
te
</div>

应该是这样的：

<header>
    <h2>Liceul Teoretic Dunarea</h2>
  </header>
    <div class="navbg">
       <ul>
         <li><a href="#">Acasa</a></li>
         <li><a href="#">Proiecte</a></li>
         <li><a href="#">Management</a></li>
         <li><a href="#">Profesori</a></li>
         <li><a href="#">Contact</a></li>
       </ul>
    </div>

Answer 3

更改您的代码，如下所示：

 <!DOCTYPE html>
 <!-- WEBSITE DE DUMITROV CRISTIAN -->
 <head>
   <title>Liceul Teoretic Dunarea</title>
   <link rel="stylesheet" type="text/css" href="css/stil.css">
 </head>
 <body>
  <header>
   <h2>Liceul Teoretic Dunarea</h2>
  </header>
 <div class="navbg">
    <ul>
     <li><a href="#">Acasa</a></li>
     <li><a href="#">Proiecte</a></li>
     <li><a href="#">Management</a></li>
    <li><a href="#">Profesori</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

 <footer>
   <div class="footertxt">
   <p><em>(C) Liceul Teoretic Dunarea<br>2013 [MMXIII]</em></p>
 </div>
</footer>
</body>

还添加以下CSS：

.navbg ul{width:100%;margin:0 auto;}

Answer 4

.navbg {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 0;
}
.navbg ul > li {
    display: table-cell;
    width: 1%;
    float: none;
    position: relative;
}
.navbg ul > li > a {
    background-color: #E5E5E5;
    color: #777777;
    font-weight: bold;
    margin-bottom: 0;
    padding-bottom: 15px;
    padding-top: 15px;
    text-align: center;
    display: block;
    padding: 10px 15px;
    position: relative;
}

按钮填满整个页面？

4 个答案: