Question

我想在一行上有一堆徽标，所以我有

<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>

我为DIV容器指定了这种样式

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

但是最后一项正在渗透到下一行 - https://jsfiddle.net/dqj5nff7/。如何将其与其他徽标保持在同一水平线上？

Answer 1

您可以使用浮动左/右更改图像位置。

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

Answer 2

您正在主div中创建另一个div。删除内部<div>并放置一个href链接，这应该有效。
或者尝试给你的内部div提供css＆＃34; display：block;＆＃34;，这也可能有用。希望有所帮助。

使用表格布局：固定，但项目仍在移动到下一行

2 个答案: