html - 为什么在线对齐在 Opera 上不起作用？

Question

为什么行内对齐在 Opera 上不起作用？

演示:http://jsfiddle.net/KKEKW/

使用 Firefox 或 Safari 时，它看起来很好。这就是我想要的样子。

在 Opera 中，一切都会像这样直接进行。我不想要它。

HTML

<div class ="social">
    <div class ="row">  
        <div class="twitter">
            twitter content
        </div>
        <div class="facebook">
            facebook content
        </div>
    </div>
    <div class ="row">
        <div class="google">
            google content
        </div>
        <div class="instagram">
            instagram content
        </div>        
    </div>
</div>

CSS

div.social {
  margin-top: 10px;
  display: inline-block;
  height: 90px;
  overflow: hidden;
  text-align: left;
  vertical-align: bottom;
}


div.row{    
}

div.twitter {
  float: left;
  width: 200px;
  height: 30px;
  overflow: hidden;
  display:inline-block;
}

div.facebook {
  float: left;
  width: 170px;
  height: 30px;
  overflow: hidden;
  display:inline-block;
}

div.google {
  float: left;
  width: 200px;
  height: 25px;
  overflow:hidden;
  display:inline-block;
}

div.instrgram {
  float: left;
  width: 170px;
  height: 30px;
  overflow: hidden;
  display:inline-block;
}

Answer 1

float:left 和 display:inline-block 相互矛盾。如果您 float 一个元素，它会使 display 属性变得无关紧要。

因此，请从您的元素中删除 float 或 display。不要试图同时使用它们；它不会按您预期的方式工作。

无论如何，在我看来你可以通过在 .row 而不是 .twitter 上指定 display:inline-block 来实现你想要的, .facebook 等元素。