为什么在线对齐不会在Opera上工作？ [英] Why in-line alignment won't work on Opera?

问题描述

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

Why in-line alignment won't work on Opera?

DEMO： 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;
}

推荐答案

float：left 和 display：inline-block 彼此矛盾。如果你浮动一个元素，它会使显示属性不相关。

float:left and display:inline-block are contradicting each other. If you float an element, it makes the display property irrelevant.

所以删除 float 或显示。不要试图同时使用它们;它不会按照你期望的方式工作。

So remove either the float or the display from your elements. Don't try to use them both at once; it won't work the way you expect.

无论如何，它看起来好像你可以通过指定显示： inline-block 在 .row ，而不是 .twitter ， .facebook 等等元素。

Anyway, it looks to me as if you could achieve what you want by specifying the display:inline-block on .row rather than the .twitter, .facebook, etc elements.

这篇关于为什么在线对齐不会在Opera上工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！