0

我正在尝试在信息、工作和联系人的顺序中将 li 标签浮动到右侧，但是当我浮动它们时，它们会将顺序更改为您在此链接上看到的顺序

我可以通过给 UL 一个宽度，然后将 UL 向右浮动，然后将 LI 向左浮动来解决此问题，但我需要 UL 标签是 Nav div（其父级）的全宽，以便它能够响应。

HTML：

    <header>
        <a href="index.html"><img src="images/logo-medium.png" alt="Madaxe Designs Web      Development &amp; IT Service" class="logo"></a>
        <nav>
            <ul>
                <li><a class="info flex" title="Information"></a></li>
                <li><a class="work flex" title="Work" href="portfolio.html"></a></li>                       
                <li><a class="contact flex" title="Contact"></a></li>               
            </ul>
        </nav>
    </header>

CSS：

nav { 
    width: 57.9%; 
    height: 100%; 
    overflow: hidden;
}
header nav ul{ 
    width: 100%; 
    height: 100%; 
    float: right; 
}               
header nav li{ 
    width: 22.3%; 
    height: 112px; 
    float: right;    
    padding-left: 5px;
}
header nav li a { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    display: block; 
}
4

1 回答 1

2

开始了

header nav ul {
    width: 100%;
    height: 100%;
    text-align: right;
}
header nav li {
    width: 22.3%;
    height: 112px;
    padding-left: 5px;
    display: inline-block;
    *display: inline; /* only for ie7 support */
    zoom: 1;          /* only for ie7 support */
}

简要说明：
我所做的是删除所有浮动元素，因为在您的情况下它是不必要的，并且 inline-block 更好，这是一个解释 说明为什么它更好

然后我将整个内容向右对齐text-align:right;

关于明星 hack：
这是支持 IE7 的必要邪恶，因为他不支持display:inline-blockso 要在 IE7 上实现内联块效果，您应该使用 

display: inline;
zoom: 1;

但是如果你添加display:inline他将覆盖display: inline-block支持它的浏览器，这就是为什么我们使用所谓的star hack来只针对IE7

于 2013-05-22T13:31:44.653 回答