gpt4 book ai didi

css - 在同一行左右对齐两个div

转载 作者:技术小花猫 更新时间:2023-10-29 12:05:04 37 4
gpt4 key购买 nike

请参阅http://jsfiddle.net/UGmA2/7/时间差

1 个 div 容器 2 个 div。想将第二个 div 放在第一行,但一直放在右边。

enter image description here任何帮助将不胜感激,

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

LIVE DEMO

关于css - 在同一行左右对齐两个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19719270/

37 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com