各LI要素に固定幅を設定します

Question

各<li>要素の幅を取得したいナビゲーションバーがあります。

理由：IE7は、子<div>が要素を中心にしてmargin: 0 autoを使用するために、親（この場合は<li>要素）を固定幅にする必要があります。固定幅ではないので、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でこのデモを試してみてください：

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

_{* jsfiddleのデフォルトのリセットスタイルシートがで有効になっていることに注意してください：私がやった*}

http://jsfiddle.net/6M8Ew/

のみ関連のものはこれですデモ。

<li>の内容は、IE6とIE7を中心にしています。

このテクニックを使用して微調整できない場合は、CSSと期待される出力を自由に共有してください。あなたがやりたいことが何であれ純粋なCSSソリューションがあることをかなり保証することができます。 javascript。

サイドノート：<div>（ブロックレベル要素）<a>（インライン）内で違法です。標準に準拠するには、<span>のようなインラインタグを使用します。

---

EDIT：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 */ 
} 

注：あなたは実際には、私だけDまず、より具体的な宣言からmargin:0 auto;を削除し、!important必要はありませんあなたのコードを修正したいと思っていて、それがいかに簡単かを示したかったのです。

私は以下IE7とのための特別なルールを追加するには、「スターハック」を使用：http://en.wikipedia.org/wiki/CSS_filter#Star_hack

ではなく、IEのハックの条件付きスタイルシートまたは他の方法（推奨）を使用する自由を感じるが、それはそれはにかかったすべてでしたあなたのレイアウトを修正し、javascriptは必要ありませんでした。 には、 javascriptが必要であるという前提の前に、常にCSSソリューションを検討してください。