Html 在ie7中右对齐内联块元素_Html_Internet Explorer_Css Float_Css

Html 在ie7中右对齐内联块元素

html internet-explorer css

Html 在ie7中右对齐内联块元素,html,internet-explorer,css-float,css,Html,Internet Explorer,Css Float,Css,我试图实现一种布局，其中一系列div被渲染成一行，其中一些左对齐，一些右对齐 <html> <body> <div width="100%"> <div class="left">item1</div> <div class="left">item2</div> <div class="right">ite

我试图实现一种布局，其中一系列div被渲染成一行，其中一些左对齐，一些右对齐

<html>
    <body>
        <div width="100%">
            <div class="left">item1</div>
            <div class="left">item2</div>
            <div class="right">item3</div>
            <div class="right">item4</div>
        </div>
    </body>
</html>
.left, .right
{
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.right
{
    float: right;
}


项目1
项目2
项目3
项目4

.左，.右
{
显示：内联块；
*显示：内联；
缩放：1；
}
.对
{
浮动：对；
}

我有上面的代码，它呈现了我在ie8、firefox和chrome中所期望的方式。但在ie7上，右浮动div显示在下一行，而不是同一行

我在家有一个房间

我知道另一个解决方案是浮动左对齐的元素，但我真的希望保留内联块的好处，比如不必担心元素不在流中

我想知道我是否可以为ie7做些别的事情来保持内联块的良好性。

我用这些做了很多工作

<html>
    <head>
        <style>

.right
{
    float: right;
}
.left
{
    float: left;
}

        </style>
    </head>
    <body>
        <div width="100%">
            <div class="left">item1</div>
            <div class="left">item2</div>
            <div class="right">item3</div>
            <div class="right">item4</div>
        </div>
    </body>
</html>


.对
{
浮动：对；
}
左边
{
浮动：左；
}
项目1
项目2
项目3
项目4

选中它：

一种解决方案是翻转标记的顺序，以便首先浮动正确的元素：

<div class="right">item3</div>
<div class="right">item4</div>
<div class="left">item1</div>
<div class="left">item2</div>

项目3
项目4
项目1
项目2

它在IE7上不起作用的原因是，内联块在IE7上对默认情况下不内联的项不起作用（请参见），因此您的浮动将显示块项浮动的正常行为-即，如果项先向左浮动，右浮动的项目将落在它们下面，就像按顺序阻止没有浮动的项目一样。

尝试在页面中放置DOCTYPE。将要右对齐的内容首先放在标记中如何？然后你的浮动元素应该按照你想要的方式排列。不，DOCTYPE没有帮助，我已经在我的真实应用程序中有了它，现在也更新了小提琴。@kinakuta-你能详细说明一下吗？我不知道如何在不浮动的情况下在同一行上右对齐控件。您仍然会浮动，您只需将要右对齐的内容放在标记中的第一位：我已经提到了这个已知的解决方案，但（在我的实际应用程序中）最好为左对齐的元素使用内联块，而不是浮动它们