組合和Li

Question

我的HTML

    </div><!-- /end .topbar --> 

        <ul class="nav"> 
          <li class="first"><a href="#">Time added</a></li> 
          <li class="first"><a href="#">Price</a></li> 
          <li class="last"><a href="#">Discount</a></li> 
          <li class="delete"><a href="#"></a></li> 
        </ul><!-- /end .nav --> 
        <div class="done hidden"> 

         <a href="#" class="button">done</a> 
        </div> 
       </div><!-- /end .mast --> 
     </div><!-- /end .inner --> 
</div><!-- /end #page --> 

我的CSS：

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

ul.nav{ 
    height:45px; 
    background:#36d6be; 
    position:fixed; 
    top:0; 
    width:100%; 

} 

ul.nav li.first{ 
    width:33.333333%; 
    float:left; 
    border-right:solid 2px #3cefd4; 
    height:45px; 
} 

ul.nav li.last{ 
    width:26.04166666666667%; 
    float:left; 
    border-right:solid 2px #3cefd4; 
    height:45px; 
} 

ul.nav li.delete{ 
    float:left; 
    width:56px; 
    height:45px; 
} 

http://jsfiddle.net/q3LGW/

我有4裏外面前兩種是在等於大小爲33％，第三個爲最後刪除垃圾桶圖標（33％ - 56px）。但是我無法創建一個固定寬度的最後一個左邊的浮點數。

Answer 1

你的前三個列表項有一個2px的右邊框，最多可以添加6px。這意味着你需要扣除，另有6 PX FRM您的最後一個列表項：

http://jsfiddle.net/q3LGW/2/

ul.nav li.delete { 
    float: left; 
    width: 50px; 
    height: 45px; 
} 

---

或者：

您可以更改盒大小屬性，使邊框包括在盒子的寬度。我建議，作爲更好的解決方案。所有你需要做的是在你的CSS文件的頂部添加此：

*, 
*:after, 
*:before { 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

如果您使用此方法，您還可以增加，去年列表項的寬度58px。

http://jsfiddle.net/q3LGW/4/

Answer 2

你必須使用顯示：表中 <ul> 並顯示：表細胞的 <li> 檢查這個fiddle

ul.nav{ 
    height:45px; 
    background:#36d6be; 
    position:fixed; 
    top:0; 
    width:100%; 
    display:table; 

} 

ul.nav li.first{ 
    width:33.333333%; 
    display:table-cell; 
    border-right:solid 2px #3cefd4; 
    height:45px; 
} 

ul.nav li.last{ 
    width:26.04166666666667%; 
    display:table-cell; 
    border-right:solid 2px #3cefd4; 
    height:45px; 
} 

ul.nav li.delete{ 
    display:table-cell; 
    width:56px; 
    height:45px; 
}