Question

如何定位3个div - 3个文本链接在左，中，右的同一行？

我需要它在Joomla第3条导航链接下的位置：PREV，INDEX，NEXT - 在同一行... PREV - 在左边，INDEX - 中心和NEXT-right;

我知道我不能使用浮动，因为没有浮动中心;如果我正在尝试使用div - 它们不会再次出现在同一条线上......

例如我正在尝试

<div style="width:700px;">
<div style="width:50px; margin-left:20px;">Prev</div>

<div style="width:50px; margin-left:350px;">Index</div>
</div>

Answer 1

你走了。

<强> WORKING DEMO

HTML：

<div class="wrapper">
    <div class="equal left">PREV</div>
    <div class="equal center">INDEX</div>
    <div class="equal right">NEXT</div>
</div>

CSS：

.wrapper{width:100%; display:table;}
.equal{display:table-cell;}
.left{text-align:left;}
.center{text-align:center;}
.right{text-align:right;}

希望这有帮助。

Answer 2

如果要将div放在页面的中心水平，可以使用css

margin-left: auto; margin-right:auto;

Answer 3

尝试这个

 <div class="main">
        <div class="div1">
         <div class="div2"></div>
         <div class=="div3"></div>
        </div>
        <div class="div4"></div>
       </div>

和css

.div1 {
  float:left;
}
.div4 {
float:right;
}
.div2 {
float:left;
}
.div3 {
float:right;
}

Answer 4

您可以通过以下列表来执行此操作：

<强> HTML：

<ul class="pagination">
    <li>Prev</li>
    <li>Next</li>
</ul>

<强> CSS：

ul.pagination {
    width: 700px;
}
ul.pagination li {
    float: left;
    list-style: none;
}

Answer 5

<div style="width:700px;">
<div style="width:50px; margin-left:20px;display: inline-block;">Prev</div>

<div style="width:50px; margin-left:350px;display: inline-block;">Index</div>
</div>

Answer 6

<强> DEMO

.master{width:100%; text-align:center; }
.master div{display:inline}
.left{float:left}
.right{float:right}

如何在同一行上定位3个div？

6 个答案: