25

请参阅http://jsfiddle.net/UGmA2/7/ TIA

1 个 div 容器 2 个 div。想将第二个 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>
4

4 回答 4

13

重复使用相同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;
}

现场演示

于 2013-11-01T01:51:11.113 回答
5

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

看来第一个 div 的宽度迫使第二个到下面的行。

于 2013-11-01T01:09:28.703 回答
3

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

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

于 2013-11-01T01:10:29.283 回答
0

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

于 2013-11-01T01:25:56.110 回答