Question

我正在尝试按照信息，工作和联系方式向右移动li标签，但是当我将它们浮动时，它们会将顺序更改为您在this link上看到的内容

我可以通过给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; 
}

Answer 1

我们走了

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

简要说明：
我做的是删除所有浮动元素，因为在你的情况下它是不必要的并且内联块更好，这里有一个解释 explanation why its better

然后我将整个内容与text-align:right;

对齐

关于明星黑客：
这是支持IE7的必要之恶，因为他不支持display:inline-block所以要在IE7上实现内联块效果你应该使用

display: inline;
zoom: 1;

但是如果你添加display:inline，他会覆盖支持它的浏览器的display: inline-block，这就是为什么我们使用什么叫 star hack 来仅定位IE7

试图按正确的顺序放置li标签

1 个答案: