Question

1 div container 2 divs。想把第二个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>

Answer 1

反复使用相同的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

Answer 2

将div id更改为class。你不能在同一页面上有两个ID。给div一个宽度，例如width:45%并浮动这些项目。

第一个div的宽度似乎是强制第二个div到下面一行。

Answer 3

向第一个div添加一个样式，如<div id="first-div" style="float-left;width:400px>

对于像这样的第二个div <div id="second-div" style="float-right;width:400px>希望这有帮助

Answer 4

使用样式“float”将要求您使用样式“width”，因此测量容器的宽度以了解分配给内部div的适当宽度

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

4 个答案: