テーブルレイアウトを使用：固定ではなくアイテムは、まだ次の行に

の上に移動している私は、DIVコンテナのこのスタイルを指定した私は、単一のライン上のロゴの束を持っていると思いますので、私はテーブルレイアウトを使用：固定ではなくアイテムは、まだ次の行に

<div id="loginImages"> 
    <a href="/auth/google"><img height="50" border="0" alt="Google" title="Google" class="loginImg" src="/assets/google_plus_icon-8d7622763257233cf58e0465806f58d7c4b82b85271c2d03d0e02b2fadc4ac76.jpg"></a> 
    <a href="/auth/facebook"><img height="50" border="0" alt="Facebook" title="Facebook" class="loginImg" src="/assets/facebook-b74d7c49fd91aa6ca76518bf46c7b75fa3b23f47028bea4b2ffaa39f5776dd91.png"></a> 
    <a href="/auth/twitter"><img height="50" border="0" alt="Twitter" title="Twitter" class="loginImg" src="/assets/twitter_icon-7dbf8db24c3ad328ea28cba340e4f53e033b64b149850324822cdb622d77f331.png"></a> 
    <a href="/auth/linkedin"><img height="50" border="0" alt="LinkedIn" title="LinkedIn" class="loginImg" src="/assets/linkedin-1d4c0d36adcec44fd86c11c47834e51e3f3226b623f91a2f215993633956e431.png"></a> 
    <a href='javascript:alert("Loser")'> 
       <div id="mySpaceLogo"></div> 
</a> </div>

を持っています

#loginImages { 
    display: table; 
    table-layout: fixed; 
    margin: 0 auto; 
}

しかし、最後の項目が次の行に引き渡されている - https://jsfiddle.net/dqj5nff7/。他のロゴと同じ水平線にするにはどうすればいいですか？

出典

2016-10-05 Anonymous

[this]（https://jsfiddle.net/dqj5nff7/1/）のような意味ですか？ – Huelfe

もちろんです。ありがとう –

フロートを使用して画像の位置を左右に変更できます。

body { 
     margin: 0; 
     padding: 0; 
    } 

    .logo { 
     float: left; 
    } 
    /* ~~ Top Navigation Bar ~~ */ 

    #navigation-container { 
     width: 1200px; 
     margin: 0 auto; 
     height: 70px; 
    } 

    .navigation-bar { 
     background-color: #352d2f; 
     height: 70px; 
     width: 100%; 
     text-align:center; 
    } 
    .navigation-bar img{ 
    float:left; 
    } 
    .navigation-bar ul { 
     padding: 0px; 
     margin: 0px; 
     text-align: center; 
     display:inline-block; 
     vertical-align:top; 
    } 

    .navigation-bar li { 
     list-style-type: none; 
     padding: 0px; 
     height: 24px; 
     margin-top: 4px; 
     margin-bottom: 4px; 
     display: inline; 
    } 

    .navigation-bar li a { 
     color: black; 
     font-size: 16px; 
     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
     text-decoration: none; 
     line-height: 70px; 
     padding: 5px 15px; 
     opacity: 0.7; 
    } 

    #menu { 
     float: right; 
    }

<body> 

    <div class="navigation-bar"> 


    <div id="navigation-container"> 

     <img src="http://i.imgur.com/hCrQkJi.png"> 

     <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Projects</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Get in Touch</a></li> 
     </ul> 
    </div> 

</body>

このリンクを確認してください： - http://codepen.io/anon/pen/GJWOBV

出典

2016-10-05 15:11:47

あなたはあなたのメインのdiv内の別のdivを作成しています。その内側の<div>を削除し、代わりにhrefリンクを挿入してください。
または内部divの "display：block;"にもcssを入力してください。希望に役立ちます。

出典

2016-10-05 15:20:07

テーブルレイアウトを使用：固定ではなくアイテムは、まだ次の行に

答えて

関連する問題