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

мой 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 строки будут "скрыты"

ДЛЯ ПРИМЕРЫ:

//ПРИМЕЧАНИЕ. 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'

Ответы

Ответ 1

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

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

Ответ 2

Это работает по вашему желанию:

<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

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

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

Работайте отлично для меня

Ответ 4

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

li{display:inline}
ul{overflow:hidden}

Ответ 5

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

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

Ответ 6

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

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

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