Как я могу расположить элементы LI внизу списка UL - PullRequest
Новая
       29

Как я могу расположить элементы LI внизу списка UL

10 голосов
/ 22 декабря 2010

У меня есть пункты меню, такие как: Row1 Row2 .. RowN, и я хочу, чтобы они не были такими широкими - поэтому с учетом разрывов (с максимальной шириной)

У меня есть этот HTML: 

<div>
 <ul>
  <li>Row1</li>
  <li>Row1 Row2 Row3</li>
  <li>Row1</li>
  <li>Row1 Row 2</li>
 </ul>
</div>

с этим CSS: 

/* MENU */

.menudiv {padding-left:10px; border-bottom: 1px solid #d0db88;}

ul.menu
{                 
    list-style-type: none;
    min-width: 1050px;
    position: relative;
    left:10px;
    display: block;
    height: 45px;       
    margin: 0;
    padding: 0;
}

ul.menu li
{    
    float: left;
    margin: 0;
    padding: 0;
}

ul.menu li a
{    
    float: left;    
    text-decoration: none;
    padding: 9px 12px 0;
    font-weight: bold;
    max-width:130px;
}

Фактический: 

+--------------------+
|Row1 Row1 Row1 Row1 |
|     Row2      Row2 |
|     Row3           |
+--------------------+

Что мне нужно: 

+--------------------+
|     Row1           |
|     Row2      Row1 |
|Row1 Row3 Row1 Row2 |
+--------------------+

Ответы [ 3 ]

4 голосов
/ 22 декабря 2010

Используйте display: inline-block вместо float: 

ul.menu
{                 
   vertical-align: bottom;
}

ul.menu li
{    
   display: inline-block;
   text-align: center;
}

РЕДАКТИРОВАТЬ: Добавлено text-align: center;.Если я правильно понимаю ваш комментарий, это то, что вы хотите.Если нет, вам нужно быть более конкретным.

0 голосов
/ 04 августа 2015

Предполагая, что следующим является ваш HTML 

<div>
    <ul>
        <li><a>Row1</a></li>
        <li><a>Row1 Row2 Row3</a></li>
        <li><a>Row1</a></li>
        <li><a>Row1 Row 2</a></li>
    </ul>
</div>

Вы можете просто оформить свой CSS следующим образом 

li {
    position:relative;
    float:left;       
}

li a {
    position:absolute;
    bottom:0;
}

Над кодом должен работать во всех браузерах (я не проверял это в разных браузерах)

0 голосов
/ 22 декабря 2010

http://css -tricks.com / что-это-вертикально-Align / Эта ссылка может помочь, в качестве альтернативы вы можете создать результат в виде содержимого на основе таблицы с содержимым, выровненным по нижней части каждой ячейки.

...