Question

我想让这个导航看起来像平铺格式。但是这里有一些白色空间出现在一排的末端。是否有可能使其形成像导航和周围环绕的边界;在它内部导航看起来像适当的瓷砖而不是一些空白..

我的代码..

＆＃13;

    .nav {
      width: 960px;
      margin: 50px auto;
      border: 1px solid #06c;
      display: table
    }
    .nav ul {
      padding: 0;
      margin: 0
    }
    .nav ul li {
      list-style: none;
      float: left;
      border: 1px solid #06C;
      font-family: Swis721 Cn BT;
      font-weight: bold;
      display: block
    }
    .nav ul li a {
      text-decoration: none;
      color: #06C;
      padding: 10px 20px 10px 12px;
      display: block
    }
    .nav ul li a:hover {
      color: #fff;
      background: #06c
    }

＆＃13;

<div class="nav">
  <ul>
    <li><a href="#">ALL</a>
    </li>
    <li><a href="#">AGENCY</a>
    </li>
    <li><a href="#">AUTOMOBILES</a>
    </li>
    <li><a href="#">BANKING</a>
    </li>
    <li><a href="#">CONSUMER DURABLE & FMCG</a>
    </li>
    <li><a href="#">CONSULTING</a>
    </li>
    <li><a href="#">EDUCATIONAL</a>
    </li>
    <li><a href="#">FINANCIAL SERVICES</a>
    </li>
    <li><a href="#">HOSPITALITY</a>
    </li>
    <li><a href="#">INFRASTRUCTURE & REAL ESTATE</a>
    </li>
    <li><a href="#">INTERNATIONAL</a>
    </li>
    <li><a href="#">IT</a>
    </li>
    <li><a href="#">LEGAL</a>
    </li>
    <li><a href="#">MANFACTURING</a>
    </li>
    <li><a href="#">MARINE</a>
    </li>
    <li><a href="#">MEDIA</a>
    </li>
    <li><a href="#">OIL & GAS</a>
    </li>
    <li><a href="#">ONLINE</a>
    </li>
    <li><a href="#">OTHERS</a>
    </li>
    <li><a href="#">PHARMA</a>
    </li>
    <li><a href="#">RETAIL</a>
    </li>
    <li><a href="#">THEME PARK</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 1

可能这会起作用，因为我给某些'li'提供了一些特殊的样式（css）但是这不会提供你想要的100％输出，但在这种情况下仍然有效..

.nav {
      width: 970px;
      margin: 50px auto;
      border:0px solid;
      display: table
    }
    .nav ul {
      padding: 0;
      margin: 0
    }
    .nav ul li {
      list-style: none;
      float: left;
      border: 1px solid #06C;
      font-family: Swis721 Cn BT;
      font-weight: bold;
      display: block;
      min-width:5%;
      width:auto;
      text-align:center
    }
    .nav ul li a {
      text-decoration: none;
      color: #06C;
      padding: 10px 20px 10px 12px;
      display: block
    }
    .nav ul li a:hover {
      color: #fff;
      background: #06c
    }

<div class="nav">
  <ul>
    <li><a href="#">ALL</a>
    </li>
    <li><a href="#">AGENCY</a>
    </li>
    <li><a href="#">AUTOMOBILES</a>
    </li>
    <li><a href="#">BANKING</a>
    </li>
    <li><a href="#">CONSUMER DURABLE & FMCG</a>
    </li>
    <li><a href="#">CONSULTING</a>
    </li>
    <li style="width:25%"><a href="#">EDUCATIONAL</a>
    </li>
    <li><a href="#">FINANCIAL SERVICES</a>
    </li>
    <li><a href="#">HOSPITALITY</a>
    </li>
    <li><a href="#">THEME PARK</a>
    </li>
    <li><a href="#">INTERNATIONAL</a>
    </li>
    <li><a href="#">IT</a>
    </li>
    <li><a href="#">LEGAL</a>
    </li>
    <li><a href="#">MANFACTURING</a>
    </li>
    <li style="width:15%"><a href="#">MARINE</a>
    </li>
    <li><a href="#">MEDIA</a>
    </li>
    <li><a href="#">OIL & GAS</a>
    </li>
    <li><a href="#">ONLINE</a>
    </li>
    <li><a href="#">OTHERS</a>
    </li>
    <li><a href="#">PHARMA</a>
    </li>
    <li><a href="#">RETAIL</a>
    </li>
    <li style="width:45%"><a href="#">INFRASTRUCTURE & REAL ESTATE</a>
    </li>
  </ul>
</div>

注意：请记住，在这种情况下输出会有所不同，例如更改字体，或者除了现在写入之外的任何导航位置更改。

Answer 2

你可以用这个

.nav{
     border:0px solid;
}

.nav ul li{
    width:25%;/*according to your need you can increase or decrease*/
}

Answer 3

.nav ul {
padding: 0;
margin: 0
}
.nav {
width: 960px;
margin: 50px auto;
border: 1px solid #06c;
display: table;
padding: 0px 0px;
font-size: 100%;
}
.nav ul li {
list-style: none;
float: left;
border: 1px solid #06C;
font-family: sans-serif;
font-weight: bold;
min-width: 7.8%;
width: auto;
font-size: inherit;
text-align: center;
}
.nav ul li a {
text-decoration: none;
color: #06C;
adding: 10px 12px 10px 12px;
display: list-item;
WIDTH: AUTO;
min-width: 100%;
box-sizing: border-box;
}
.nav ul li a:hover {
color: #fff;
background: #06c
}

<div class="nav">
  <ul>
    <li><a href="#">ALL</a>
    </li>
    <li><a href="#">AGENCY</a>
    </li>
    <li><a href="#">AUTOMOBILES</a>
    </li>
    <li><a href="#">BANKING</a>
    </li>
    <li><a href="#">CONSUMER DURABLE & FMCG</a>
    </li>
    <li><a href="#">CONSULTING</a>
    </li>
    <li><a href="#">EDUCATIONAL</a>
    </li>
    <li><a href="#">FINANCIAL SERVICES</a>
    </li>
    <li><a href="#">HOSPITALITY</a>
    </li>
    <li><a href="#">INFRASTRUCTURE & REAL ESTATE</a>
    </li>
    <li><a href="#">INTERNATIONAL</a>
    </li>
    <li><a href="#">IT</a>
    </li>
    <li><a href="#">LEGAL</a>
    </li>
    <li><a href="#">MANFACTURING</a>
    </li>
    <li><a href="#">MARINE</a>
    </li>
    <li><a href="#">MEDIA</a>
    </li>
    <li><a href="#">OIL & GAS</a>
    </li>
    <li><a href="#">ONLINE</a>
    </li>
    <li><a href="#">OTHERS</a>
    </li>
    <li><a href="#">PHARMA</a>
    </li>
    <li><a href="#">RETAIL</a>
    </li>
    <li><a href="#">THEME PARK</a>
    </li>
  </ul>
</div>

导航中的白色空间

3 个答案: