Как разместить 3 деления на одной строке?

Question

Как разместить 3 деления на одной строке?

0

Как разместить 3 divs - 3 части текстовой ссылки на одной строке в левой, центральной и правой частях?

Мне нужно, чтобы он размещался под ссылками на Joomla статьи 3: PREV, INDEX, NEXT - в одной строке... PREV - слева, INDEX - центр и NEXT-right;

Я знаю, что не могу использовать float, потому что нет центра float; если я пытаюсь использовать divs - они снова не на одной строке...

например, я пытался

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

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

Red Zambala 03 дек. 2013, в 14:07

Источник

Теги:

html

css

joomla

6 ответов

Ещё вопросы

Nitesh · Answer 1 · 2013-12-03T10-36-00.000Z

Ну вот.

РАБОЧАЯ ДЕМО

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

Надеюсь это поможет.

Jorge · Answer 2 · 2013-12-03T12-17-00.000Z

Если вы хотите поместить div в центр страницы по горизонтали, вы можете использовать css

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

mehdi · Answer 3 · 2013-12-03T11-15-00.000Z

DEMO

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

akash · Answer 4 · 2013-12-03T11-10-00.000Z

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

Lodder · Answer 5 · 2013-12-03T10-11-00.000Z

Вы всегда можете сделать это через список:

HTML:

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

CSS:

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

Praveen M P · Answer 6 · 2013-12-03T09-56-00.000Z

Попробуй это

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