-1

インラインアライメントが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;
}

欲しい出力

twitter content ewfe(20px margin)facebook conten adhfhefjw
google content ewffewfewfewfew(20px margin)instagram content dwqwqqwfqwe
4

1 に答える 1

1

スタイル付きの順序付けられていないリストは、これを行うことができます。

LI幅を固定して、UL2倍にしてください。で使用float:leftしますLI。

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

CSS:

social ul, social li {
    margin:0;
    padding:0;
    list-style:none;    
}

.social ul {
    width:500px;
}

.social li {
    width:250px;
    float:left;
}
于 2013-02-01T19:06:31.950 に答える