Горизонтальная проблема переноса списка CSS

0

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

http://jsfiddle.net/s5PBZ/1/

Поскольку вы можете видеть только два элемента: Lorem Ipsum видна, поскольку последние несколько букв Dolor не могут быть размещены внутри div, поэтому список завернут. Но я хочу, чтобы все было в одной строке, даже если некоторый текст обрезается. Например, выход, который я желаю, это "Lorem Ipsum Dol" или что-то еще, и остальная часть текста должна переполняться за пределы div.

Я пробовал различную комбинацию

white-space: nowrap;

display: inline-block;

float: left;

Но достичь желаемого результата не удалось.

Примечание. Я достиг результата с помощью таблицы, но мне просто интересно узнать, что я делаю неправильно здесь.

Редактировать: Я думаю, я не был ясно в своем посте. Я должен установить ширину таблицы, на самом деле пользователь установит ширину таблицы во время выполнения, у меня есть такой интерфейс. И хотя установка ul width решает проблему, но количество элементов полностью динамично. Поэтому я не могу просто установить ширину.

  • 0
    установить ширину в ul jsfiddle.net/s5PBZ/2
  • 1
    Вы абсолютно ясно с вопросом, проверьте скрипку, которую я отправил в ответе.
Теги:

4 ответа

1
Лучший ответ

просто делать

.LongList ul li {
display: inline-block; /* add this , remove float and its done */
}

DEMO

Поделиться
  • 0
    Я не вижу, добавлено ли что-нибудь в список в вашей скрипке. Ваша скрипка все еще не дает ответа до желаемого
  • 0
    ну пусть Маке проверит другие вещи тогда
Показать ещё 4 комментария
0

Вы должны использовать set overflow:hidden и display:inline-block для решения этой проблемы,

Проверьте это demo jsFiddle

CSS

.LongList ul {
        margin: 0;
        padding: 0;
        height: 21px;
        display: inline-block;
        overflow:hidden;
    }

Вы можете проверить это, чтобы увеличить width: 150px до 250px в .LongList{} еще ul список display inline block.

Другой способ, которым вы можете архивировать, используя display:inline-block в .LongList ul li{} class,

Проверьте это Demo jsFiddle

.LongList ul li{
        display: inline-block;         // Add new
        float: left;                   // Remove this
 }

Надеюсь, это поможет вам!

Поделиться
  • 1
    как я прокомментировал выше ответ, when you extend last word it goes on next line which he does not want.
  • 0
    Отредактировал мой ответ, пожалуйста, проверьте
Показать ещё 1 комментарий
0

я исправил вашу скрипку и удалил ненужные правила. Проверьте это.

Скрипка

.LongList
{
margin: 0;
    display: block;
    height: 21px;
    padding: 5px;
    background: #fff;          
    border: 2px solid #000;
}
Поделиться
  • 1
    когда вы расширяете последнее слово, оно идет на следующей строке, которую он не хочет.
  • 0
    Отредактировал мой ответ, пожалуйста, проверьте
-1

почему вы дали эту ширину

<table cellpadding="0" cellspacing="0" border="0" width="160px">

удалить эту ширину

и в css, дайте width:auto

.LongList
    {
    margin: 0;
            float: left;
            display: block;
            height: 21px;
            width: auto;
            overflow: hidden;
            padding: 5px;
            background: #fff;
            white-space: nowrap;            
            border: 2px solid #000;
    }
Поделиться
  • 1
    внимательно прочитайте вопрос, he desired clipped output in a container , not auto width
  • 0
    Отредактировал мой ответ, пожалуйста, проверьте

Ещё вопросы

Сообщество Overcoder
Наверх
Меню