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

please see http://jsfiddle.net/UGmA2/7/ TIA

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

1 div container 2 divs. Would like to put the second div on the first line but have it all the way to the right.

1 div容器2 divs。想把第二个div放在第一行但是一直到右边。

css - 在同一行左右对齐两个div Any help would be appreciated,

任何帮助，将不胜感激，

<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.*.org">Text</a>

                </li>
                <li><a href="http://www.*.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>

                </li>
                <li><a href="http://www.*.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>

                </li>
                <li><a href="http://www.*.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>

                </li>
                <li><a href="http://www.*.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.*.org">Text1</a>
                    <li id="text_separator"><a href="http://www.*.org">Text2</a>

                        <li id="text_separator"><a href="http://www.*.org">Text3</a>

                            <li id="text_separator"><a href="http://www.*.org">Text4</a> 
            </ul>
        </div>
    </div>
</body>

4 个解决方案

#1

Using same id repeatedly isn't a good idea, i change it all into class

重复使用相同的id并不是一个好主意，我将它全部改为课堂

here is the modification

这是修改

<body >
  <div class="footer-container">
    <div class="div-left">
      <ul class="footer">
        <li><a href="http://www.*.org">Text</a>
        </li>
        <li><a href="http://www.*.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
        </li>
        <li><a href="http://www.*.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
        </li>
        <li><a href="http://www.*.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
        </li>
        <li><a href="http://www.*.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.*.org">Text1</a></li>
        <li><a href="http://www.*.org">Text2</a></li>
        <li><a href="http://www.*.org">Text3</a></li>
        <li><a href="http://www.stackflow.org">Text4</a></li>
       </ul>
     </div>
   </div>
</body>

CSS:

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

现场演示

#2

change div id to class. you cannot have two ids on the same page. give the divs a width eg width:45% and float these items.

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

It appears the width of the first div is forcing the second to the line below.

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

#3

To the first div add a style to it like this <div id="first-div" style="float-left;width:400px>

到第一个div添加样式就像这样

For the second div like this <div id="second-div" style="float-right;width:400px> hope this helps

对于像这样的第二个div

希望这有助于

#4

Using the style "float" will demand that you use the style "width" so measure out the width of the container to know the appropriate width to assign to the inner divs

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

#1