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，只需从第一个更具体的声明中删除margin:0 auto;，我只是不想修改您的代码，并希望展示它是多么容易是

我使用“明星黑客”为IE7及以下版本添加了一条特殊规则：http://en.wikipedia.org/wiki/CSS_filter#Star_hack

随意使用条件样式表或其他方法（推荐）而不是IE黑客，但这就是修复你的布局所需要的，不需要javascript。在做出需要 javascript的假设之前，请先查看CSS解决方案。

为每个LI元素设置固定宽度

1 个答案: