Как оформить 3 неупорядоченных списка по горизонтали в 1 дел

Question

Как оформить 3 неупорядоченных списка по горизонтали в 1 дел

0

Как я могу отображать 3 неупорядоченных списка по горизонтали рядом друг с другом? 3 ul завернуты в 1 div, называемый "налог".

Я пробовал следующее, но он не отображается правильно. Я знаю, что могу решить эту проблему, обертывая каждую ul с помощью div, но я не хочу использовать дополнительную разметку, когда это не обязательно.

Пример: http://jsfiddle.net/Eric87/LKp69/13/

HTML

<div id="tax">
<hr>
<h2>
Recent News </h2>
<ul id="recent-news">
    <li>
    <a href='#'>
    new release </a>
    &#32;&rsaquo; </li>
    <li>
    <a href='#'>
    testing titel </a>
    &#32;&rsaquo; </li>
</ul>
<h2>
Categories </h2>
<ul id="categories">
    <li>
    <a href="#">
    Audio </a>
    &#32;&rsaquo; </li>
    <li>
    <a href="#">
    Uncategorized </a>
    &#32;&rsaquo; </li>
</ul>
<h2>
Archives </h2>
<ul id="archives">
    <li>
    <a href=''>
    August 2013 </a>
    &nbsp; </li>
    <li>
    <a href='#'>
    July 2013 </a>
    &nbsp; </li>
    <li>
    <a href='#'>
    May 2013 </a>
    &nbsp; </li>
    <li>
    <a href='#'>
    December 2012 </a>
    &nbsp; </li>
</ul>

CSS

 #tax {
margin-top:100px;
}

#tax ul {
width:33%;
list-style:outside;
}

#categories,#archives,#recent-news {
display:inline-block;
float:left;
}

Eric 04 янв. 2014, в 15:58

Источник

Теги:

html

css

5 ответов

2

Создайте обертку для каждого элемента и назначьте каждому элементу класс под названием "pull-left". И затем добавьте стиль ниже:

<div class="pull-left">
    <h2>Title</h2>
    <ul>
        <li>...</li>
    </ul>
</div>  
<div class="pull-left">
    <h2>Title</h2>
    <ul>
        <li>...</li>
    </ul>
</div> 
<div class="pull-left">
    <h2>Title</h2>
    <ul>
        <li>...</li>
    </ul>
</div>

Вот ваш код css для класса pull-left:

.pull-left { float: left; }

Ali Emre Çakmakoğlu 04 янв. 2014, в 11:46

1

Для горизонтальных вы в основном должны использовать div для обертывания ul.

http://jsfiddle.net/5d5eM/

div {
    width: 50px;
    border: 1px solid #000;
    float: left;
}
br { clear: left; }

dzeki 04 янв. 2014, в 13:37

0

Он сказал горизонтально
user2203117 04 янв. 2014, в 14:45

1

здесь создайте одну оболочку div для включения с тегом заголовка и ul. Например, здесь я создаю оболочку div с именем "test".

<div id="tax">
    <div class="test">
    <h2>
    Recent News </h2>
    <ul id="recent-news">
        <li>
        <a href='#'>
        new release </a>
        &#32;&rsaquo; </li>
        <li>
        <a href='#'>
        testing titel </a>
        &#32;&rsaquo; </li>
    </ul>
    </div>
    <div class="test">
    <h2>
    Categories </h2>
    <ul id="categories">
        <li>
        <a href="#">
        Audio </a>
        &#32;&rsaquo; </li>
        <li>
        <a href="#">
        Uncategorized </a>
        &#32;&rsaquo; </li>
    </ul>
    </div>
    <div class="test">
    <h2>
    Archives </h2>
    <ul id="archives">
        <li>
        <a href=''>
        August 2013 </a>
        &nbsp; </li>
        <li>
        <a href='#'>
        July 2013 </a>
        &nbsp; </li>
        <li>
        <a href='#'>
        May 2013 </a>
        &nbsp; </li>
        <li>
        <a href='#'>
        December 2012 </a>
        &nbsp; </li>
    </ul>
    </div>
</div>

Css:

<style type="text/css">
 #tax {
margin-top:100px;
}


#categories,#archives,#recent-news {
display:inline-block;
float:left;
}
.test{width:33%; 
float:left;}

</style>

см. демо

Mitul Shah 04 янв. 2014, в 13:09

1

ЗДЕСЬ РАБОЧАЯ ЖИЗНЬ ДЕМО: НАЖМИТЕ ЗДЕСЬ

у меня есть добавочный дополнительный <div> для всех <ul> и поместите его в float: left:

в основном все

user2232273 04 янв. 2014, в 11:55

Ещё вопросы

Niels Keurentjes · Accepted Answer · 2014-01-04T13-00-00.000Z

Вы пытаетесь выровнять два элемента по горизонтали, как h2 и ul которые идут с ним, и почему он не работает "как ожидалось". Единственный способ решить эту проблему, чтобы оба эти элемента действовали как единое целое, заключается в добавлении дополнительного элемента разметки вокруг обоих из них и применении регулярных правил горизонтального макета к этому элементу. Я бы рекомендовал section для этого, например:

<section id="archives">
  <h2>Section title</h2>
  <ul><!-- bunch of list items --></ul>
</section>

Это не "лишняя дополнительная разметка", это требуется разметка, если вы хотите, чтобы 2 элемента были в макете как 1.

Спасибо всем за ответы. Так что, как я понимаю, это можно сделать только с div вокруг каждого ul. Я уже знал это, но все равно спасибо. Я подумал, может быть, это также возможно сделать без div, но если это потребуется, я сделаю это.