爲每個LI元素設置一個固定寬度

Question

我有一個導航欄，我想要得到每個<li>元素的寬度，然後將固定寬度放在它上面。

原因：IE 7需要父級（此例中爲<li>元素）爲固定寬度，子元素<div>元素使用margin: 0 auto居中。由於其寬度不是固定的，因此auto正在將<li>標籤推到100％的寬度;

HTML

<div class="subnav"> 
<ul> 

<li class="apparel"> 
<a href="apparel.html"> 
<div class="image"></div> 
<div class="title">APPAREL</div> 
</a> 
</li> 
<li class="pads"> 
<a href="pads-girdles.html"> 
<div class="image"></div> 
<div class="title">PADS/GIRDLES</div> 
</a> 
</li> 

</ul> 
</div> 

CSS的時間

.subnav { margin:20px auto; } 
.subnav ul { float:left; } 
.subnav li { display: block; 
      cursor:pointer; 
      position:relative; 
      float:left; 
      padding:5px 8px 0;  
      border-top:1px solid #FFF; 
      border-left:1px solid #FFF; 
      border-right:1px solid #FFF; } 
.subnav li.last-link { margin-right:0; } 
.subnav li div.title { font-family: 'Cuprum', sans-serif; 
font-size:15px; font-weight:500; text-align:center; margin-top:5px; color:#214592; } 
.subnav li div.image { background-repeat:no-repeat; overflow:hidden; margin:0 auto; background-position:center center; height:60px; } 
.subnav li.apparel div.image { background-image:url(../images/football_apparel_icon.jpg); width:58px; } 
.subnav li.pads div.image { background-image:url(../images/football_pads_icon.jpg); width:50px; } 
.subnav li.gloves div.image { background-image:url(../images/football_gloves_icon.jpg); width:33px; } 
.subnav li.accessories div.image { background-image:url(../images/football_pads_icon.jpg); width:50px; } 
.subnav li.protective div.image { background-image:url(../images/football_protective_icon.jpg); width:64px; } 
.subnav li.cleats div.image { background-image:url(../images/football_cleats_icon.jpg); width:64px; } 
.subnav li.accessories div.image { background-image:url(../images/football_accessories_icon.jpg); width:47px; } 
.subnav li.footballs div.image { background-image:url(../images/football_football_icon.jpg); width:55px; } 
.subnav li.sport div.image { background-image:url(../images/football_sport-bag_icon.jpg); width:58px; } 
.subnav li.hydration div.image { background-image:url(../images/football_hydration_icon.jpg); width:22px; } 
.subnav li.performance div.image { background-image:url(../images/football_performance_icon.jpg); width:88px; } 

Answer 1

95％，text-align:center是所有你需要的東西居中。試試這個演示在IE6或IE7：

http://jsfiddle.net/6M8Ew/

唯一實質性的事情*我做的是：

ul li { 
    display:block; 
    text-align:center; 
    float:left; 
} 

_{*記住的jsfiddle的默認復位樣式表在啓用演示。}

<li>的內容集中在IE6和IE7中。

如果您無法使用此技術對其進行微調，可隨意分享您的CSS和期望的輸出 - 我幾乎可以保證，無論您想要做什麼，都有純CSS解決方案，而且您不需要JavaScript的。

邊注：<div>（塊級元素）是內<a>（內聯）是非法的。要符合標準，請使用內聯標籤，如<span>。

---

編輯：選中此更新演示在IE6和7，它看起來就像它在Firefox和Chrome：http://jsfiddle.net/zFLK7/3/

這是我改變你的代碼（見演示最底部，我只加代碼，並沒有修改現有的CSS）：

.subnav ul li { 
    text-align:center; 
} 
.image { 
    margin:0 auto; /* this was already there, needed for modern browsers */ 
    *margin:0 !important; /* IE6 and 7 needed this */ 
} 

注意：您實際上並不需要!important，只是從第一，更具體的聲明，我剛d刪除margin:0 auto;我不想修改你的代碼，並想顯示它是多麼容易。

我用「星入侵」，以增加對IE7一個特殊的規則及以下：http://en.wikipedia.org/wiki/CSS_filter#Star_hack

隨意使用條件樣式表或其他方法（推薦），而不是IE的黑客，但是所有它採取修正你的佈局，不需要javascript。在做出假設前，請務必首先查看CSS解決方案，以確保您的需要使用 javascript。