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

我试图在订单信息、工作和联系人中向右浮动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>

我们开始

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

简要说明：
我所做的是删除所有浮动元素，因为在您的情况下，它是不必要的，内联块更好，下面是一个解释

然后我用

text align:right将整个内容向右对齐

关于明星黑客：

这对于支持IE7来说是一个必要的缺点，因为他不支持
display:inline block
，所以要在IE7上实现内联块效果，应该使用

display: inline;
zoom: 1;

但是如果您添加
display:inline
，他将覆盖支持它的浏览器的
display:inline块
，这就是为什么我们使用所谓的star hack只针对IE7的原因，这是float:right的正确行为。正如您正确指出的，您可以在右浮动容器中将它们向左浮动。但是，难道不可能对li列表进行重新排序吗？我原以为可以选择对列表进行重新排序，但当我缩小浏览器时，按钮会在另一个按钮下面，按这种顺序排列看起来很愚蠢。很明显，在链接上，当浏览器缩小时，它们的顺序是正确的。仅供参考，您应该预加载悬停状态图像。对于以前没有访问过你的页面的用户，浏览器缓存它们之前会有一段延迟。如果你使用HTML5标记，如
nav
，那么你应该使用
inline block
，而不是浮动布局。谢谢，我已经在主站使用AJAX实现了这一点，但这真的只是在胡闹。为什么我不使用浮动，而使用内联块呢？这似乎很好用。你能解释一下你以后为别人和我做了什么吗？我不推荐star hack，而是将
li
元素更改为默认内联元素，因为star hack不是有效的CSS。就像我说的，如果他不需要支持ie7，他不需要这两行，我已经为IE设置了一个块，如果它不能在任何低于8的IE浏览器上小于940px。谢谢你。非常有用的阅读。
内联块
非常好，但有时在尝试使用它实现布局时，您会遇到问题，因为它使用了空格。我建议在
中添加
字体大小：0
，然后在
上设置正确的字体大小。
display: inline;
zoom: 1;