css - 在同一行左右对齐两个div
请参阅http://jsfiddle.net/UGmA2/7/ TIA
1 div容器2 divs.想把第二个div放在第一行但是一直到右边.
任何帮助,将不胜感激,
<body background-color: #000000;>
<div id="footer-container" style="width=980px;">
<div id="div-left">
<ul id="footer">
<li id="text_separator"><a href="http://www.stackoverflow.org">Text</a>
</li>
<li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
</li>
<li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
</li>
<li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
</li>
<li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
</li>
</ul>
</div>
<div id="div-left">
<ul id="footer">
<li id="text_separator"><a href="http://www.stackoverflow.org">Text1</a>
<li id="text_separator"><a href="http://www.stackoverflow.org">Text2</a>
<li id="text_separator"><a href="http://www.stackoverflow.org">Text3</a>
<li id="text_separator"><a href="http://www.stackoverflow.org">Text4</a>
</ul>
</div>
</div>
</body>
id反复使用它不是一个好主意,我把它全部改成了class
这是修改
<body >
<div class="footer-container">
<div class="div-left">
<ul class="footer">
<li><a href="http://www.stackoverflow.org">Text</a>
</li>
<li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
</li>
<li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
</li>
<li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
</li>
<li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
</li>
</ul>
</div>
<div class="div-right">
<ul class="footer">
<li><a href="http://www.stackoverflow.org">Text1</a></li>
<li><a href="http://www.stackoverflow.org">Text2</a></li>
<li><a href="http://www.stackoverflow.org">Text3</a></li>
<li><a href="http://www.stackflow.org">Text4</a></li>
</ul>
</div>
</div>
</body>
CSS:
body{
background-color: #000000;
}
.div-left{
float:left;
padding-left:10px;
}
.div-right{
float:right;
padding-right:10px;
}
.footer-container{
height:40px;
max-width:980px;
border:1px solid salmon;
padding-top:5px;
}
.footer {
height:30px;
line-height:30px;
border:solid 1px #E5E5E5;
}
.footer li {
list-style-type:none;
float:left;
padding-left:10px;
}
.footer a {
text-decoration:none;
color:#0088CC;
}
.footer li:nth-child(1) {
text-decoration:none;
height:30px;
display:block;
background-image:url('http://s7.postimg.org/w0nt224pj/bc_separator.png');
background-repeat:no-repeat;
background-position:right;
padding-right: 15px;
}
ul {
list-style-type:none;
padding:0px;
margin:0px;
}
将 div id 更改为类。您不能在同一页面上有两个 ID。给 div 一个宽度，例如width:45%并浮动这些项目。
看来第一个 div 的宽度迫使第二个 div 到下面的行。