Хотите выровнять три divs, которые содержат списки по горизонтали

-1

Я работаю с html-страницей в том, что я застрял с содержимым нижнего колонтитула. Я хочу, чтобы выровнять три div, который содержит некоторые lists как горизонтальнаяХотите выровнять три divs, которые содержат списки по горизонтали

как этот

enter image description here

CSS

.left-col { 
    float: left; 
    width:25%; 
    height:100px; 
    background-color:blue; 
} 
.center-col { 
    float: left; 
    width: 50%; 
    height:100px; 
    background-color: cornflowerblue; 
    text-align:center; 
} 
.right-col { 
    float: left; 
    width: 25%; 
    height:100px; 
    background-color:green; 
    text-align: right; 
}

HTML

<div class="left-col"><ul><li>hai</li> 
    <li>hai</li> 
    <li>hai</li> 
    <li>hai</li> 
    <li>hai</li></ul></div> 
<div class="center-col"><ul><li>hai</li> 
    <li>hai</li> 
    <li>hai</li> 
    <li>hai</li> 
    <li>hai</li></ul></div> 
<div class="right-col"><ul><li>hai</li> 
    <li>hai</li> 
    <li>hai</li> 
    <li>hai</li> 
    <li>hai</li></ul></div>

, пожалуйста, помогите мне исправить эту

источник

2014-02-19 Дмитрий Иванович Менделеев

Что у вас есть? – Huangism

можете ли вы предоставить свой код, пожалуйста? –

Я закрыл ваш вопрос, так как вы не поделились соответствующим кодом здесь, и если вы еще не пробовали его, пожалуйста, сделайте это, и поделитесь кодом здесь –

Удалить предварительно заданной высоты на Div-х. Пусть они расширяются в соответствии с содержанием. В центре div вы можете указать ширину в ul, а затем сделать текст в центре, используя margin-left и margin-right as auto.

.left-col { 
    float: left; 
    width:25%; 
    background-color:blue; 
} 
.center-col { 
    float: left; 
    width: 50%; 
    background-color: cornflowerblue; 

} 
.center-col ul 
{ 
margin-left: auto; 
margin-right: auto; 
width: 100px; 
} 
.right-col { 
    float: left; 
    width: 25%; 
    background-color:green; 
    text-align: right; 
}

Fiddle: http://jsfiddle.net/ankur1990/H734d/

Кроме того, если вы не хотите утруждать себя с шириной ул, то вы можете просто пойти на запас, слева уль

.center-col ul 
{ 
margin-left:100px //According to your need 
}

источник

2014-02-19 14:09:06

http://jsfiddle.net/H734d/1/ –

теперь это perffect ... в любом случае спасибо за помощь .. –

http://jsfiddle.net/H734d/3/ –

DEMO

Вот 2 решения: с float: left; и display: inline-block;

источник

2014-02-19 13:58:34

HTML

<footer> 
<div class="list33"> 
    <ul> 
     <li>hai</li>    
     <li>hai</li> 
     <li>hai</li> 
    </ul> 
</div> 
<div class="list33"> 
    <ul> 
     <li>hai</li>    
     <li>hai</li> 
     <li>hai</li> 
    </ul> 
</div> 
<div class="list33"> 
    <ul> 
     <li>hai</li>    
     <li>hai</li> 
     <li>hai</li> 
    </ul> 
</div>

CSS

footer .list33 { 
width: 33.33%; 
float: left;  
}

Fiddle: http://jsfiddle.net/Olavxxx/K8H25/

источник

2014-02-19 13:59:50 Olavxxx

Вы можете использовать display:table-cell; поэтому он будет горизонтально выровнен и вертикально по мере роста высоты:

Демонстрация: http://jsfiddle.net/HarishBoke/54uap/

источник

2014-02-19 14:14:03 Harish

Хотите выровнять три divs, которые содержат списки по горизонтали

ответ

Смежные вопросы