как выровнять все мои li на одной строке? - PullRequest
Новая
       11

как выровнять все мои li на одной строке?

16 голосов
/ 24 февраля 2010

мой CSS 

ul{
overflow:hidden;
}
li{
display:inline-block;
}

мой HTML 

<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>

Я хочу выровнять все мои элементы li в одну строку, если я сделал, чтобы все работало нормально, за исключением того, что когда 3 или 4 li заполняют первую строку на моем теле, они переходят на вторую строку, я хочу, чтобы они были на 1 строка и все после заполнения 1 строки будет «скрыто»

НА ПРИМЕРЕ ::

// NOTE li содержит предложения, а не только 1 букву

ВЫХОД СЕЙЧАС :: 

a               b                c              d
      e                  f               g

желаемый выход :: 

a                 b              c              d         e      f  //all of them in 1 line and the rest of them are hidden 'overflow:hidden'

Ответы [ 7 ]

28 голосов
/ 24 февраля 2010

Попробуйте поместить white-space:nowrap; в ваш <ul> стиль

edit: и использовать 'inline' вместо 'inline-block', как указали другие (и я забыл)

8 голосов
/ 24 февраля 2010

Это работает, как вы хотите: 

<html>
<head>
    <style type="text/css"> 

ul
{ 
overflow-x:hidden;
white-space:nowrap; 
height: 1em;
width: 100%;
} 

li
{ 
display:inline; 
}       
    </style>
</head>
<body>

<ul> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
</ul> 

</body>
</html>
3 голосов
/ 13 октября 2015

Использование дисплея: таблица

HTML: 

<ul class="my-row">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

CSS: 

ul.my-row {
  display: table;
  width: 100%;
  text-align: center;
}

ul.my-row > li {
  display: table-cell;
}

SCSS: 

ul {
  &.my-row {
    display: table;
    width: 100%;
    text-align: center;

    > li {
      display: table-cell;
    }
  } 
}

Отлично работает для меня

2 голосов
/ 24 февраля 2010

Вот что вы хотите. В этом случае вы не хотите, чтобы элементы списка обрабатывались как блоки, которые можно переносить. 

li{display:inline}
ul{overflow:hidden}
1 голос
/ 29 августа 2016

Я бы порекомендовал: 

<style>
    .clearfix {
       *zoom: 1;
    }
    .clearfix:before,
    .clearfix:after {
        content: " ";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    ul.list {
       list-style: none;
    }
    ul.list li {
       display: inline-block;
    }
</style>

<ul class="list clearfix">
    <li>li-one</li>
    <li>li-two</li>
    <li>li-three</li>
    <li>li-four</li>
</ul>
0 голосов
/ 27 апреля 2018

Кроме white-space:nowrap; также добавьте следующий CSS 

ul li{
  display: inline;
}
0 голосов
/ 14 февраля 2012

Я думаю, что тег NOBR может быть излишним и, как вы сказали, ненадежным.

В зависимости от способа отображения текста доступны 2 параметра.

Если вы отображаете текст в ячейке таблицы, вы должны сделать здесь Длинный текст. Если вы используете div или span, вы можете использовать style = "white-space: nowrap;"

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...