我想在一行中有一堆 Logo ，所以我有
<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/ .如何使它与其他 Logo 保持在同一水平线上？
最佳答案
您可以使用 float 向左/向右更改图像位置。
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
关于html - 使用表格布局 :fixed but item is still moving over onto the next line，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39876853/