Список html в строку: Как разместить элементы списка горизонтально?

Leave a Comment / Html / By /

html — CSS. Как поставить список в одну строку?

Вроде поставил float: left; но список не выравнивается по левому краю и не встает в одну линию

* {
  margin: 0;
  padding: 0;
}
.header {
  background-color: #EABCBC;
  text-align: center;
  height: auto;
  font: 1.6em arial;
  padding: auto;
}
.complex_list {
  background-color: #76DBE4;
}
.complex_list ul li {
  float: left;
}
.complex_list li {
  font: 0.75em arial;
  list-style: none;
}
.complex_list li a {
  text-decoration: none;
  color: #FF8604;
}
.complex_list li a:hover {
  text-decoration: underline;
  color: blue;
}
<div>
  <h2>Стройка</h2>
  <ul>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
  </ul>
  
</div>
  • html
  • css
  • float

2

. complex_list ul li — Это значит «все li внутри ul, который внутри complex_list». Селектор неправильный, должен быть ul.complex_list li — «все li внутри ul с классом complex_list» и заработает.

Но float: left предназначен для обтекания текста, а не для позиционирования.
Пробуйте ul.complex_list { display: flex; }:

* {
  margin: 0;
  padding: 0;
}
.header {
  background-color: #169;
  color: white;
  text-align: center;
  height: auto;
  font: 1.6em arial;
  padding: auto;
}
.complex_list {
  background-color: #2bd;
  padding: 4px;
}
ul.complex_list {
  display: flex;
}
.complex_list li {
  font: 0.75em arial;
  list-style: none;
}
.complex_list li a {
  text-decoration: none;
  margin: 2px;
  color: #fff;
}
.complex_list li a:hover {
  text-decoration: underline;
  color: blue;
}
<div>
  <h2>Стройка</h2>
  <ul>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
  </ul>
  
</div>

4

у вас ошибка в селекторе . complex_list ul li вы пытаетесь применить стили к несуществующему элементу, селектор должен быть такого вида

 
.complex_list li {
    float: left;
}

хотя для этой задачи лучше использовать

.complex_list li{
    display: inline-block;
}

либо такой вариант

.complex_list {
    display: flex;
}

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

css3 — Как элементы списка расположить в одну строку без переноса?

Задать вопрос

Вопрос задан

Изменён 2 года 4 месяца назад

Просмотрен 860 раз

Необходимо чтобы все элементы списка всегда были на одной строке и при необходимости добавлялся скрол

html:

    <ul>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>
 </div>

css:

. box {
    width: 300px;
    height: 150px;
    border: 2px solid black;
    overflow: auto;
}
.list-item {
    display: inline;
}
  • css3
  • html5
  • ul
  • overflow
  • li

Используйте white-space: nowrap — это свойство запрещает перенос inline и inline-block элементов

.box {
    width: 300px;
    height: 150px;
    border: 2px solid black;
    overflow: auto;
}
.list{
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}
.list-item {
    display: inline;
}
<div>
    <ul>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>
 </div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Elm: Как отобразить список строк в списке HTML?

Задавать вопрос

спросил

Изменено 3 года, 9 месяцев назад

Просмотрено 21к раз

Я пишу программу для elm, которая должна форматировать вывод в виде списка HTML. Функция, которую я хочу, принимает,

 вводов = ["первый", "второй", "третий"]

и выводит какой-то Elm Element то есть по сути,

 
    
    
  • сначала
    • 
    
  • секунда
    • 
    
  • третий
    •

К сожалению, я не могу найти никаких встроенных функций для этого. Возможно, синтаксис markdown может быть расширен для использования шаблонов, подобных Mustache,

 [markdown|
{{#входы}}
* {{текст}}
{{/входы}}
]

(извините, я не уверен, что правильный синтаксис Mustache для массива строк вместо массива объектов).

Неплохо бы также испускать необработанные HTML-элементы. Заранее спасибо!

1

Вы хотите визуализировать в элементе (например, на холсте) или действительно как HTML. Если последнее, то вы можете использовать elm/html и

 renderList : List String -> Html msg
список рендеринга лст =
    ул []
        (List. map (\l -> li [] [текст l]) lst)

или в стиле трубопровода

 renderList : List String -> Html msg
список рендеринга лст =
    лст
       |> List.map (\l -> li [] [текст l])
       |> ул []

или в стиле без точек

 renderList : List String -> Html msg
список рендеринга лст =
    лст
       |> List.map (li [] << List.singleton << текст)
       |> ул []

5

Когда вы начинаете писать функцию, полезно определить сигнатуру вашей функции. Подпись пишется в строке перед определением функции. Подпись, которую вы хотите:

 toHtmlList : List String -> Html msg — вот подпись
toHtmlList strings = -- начало тела функции
  ???

Вывод этой функции имеет тип Html msg , который предоставляется пакетом elm-html. Вы добавляете это в свой проект, выполнив команду $ elm-package install elm-lang/html из корня вашего проекта.

После установки добавьте оператор для импорта Html в файл elm и реализуйте функцию. Вот рабочая реализация:

StringList.elm 

 import Html, раскрывающий (..)
inputs = ["первый", "второй", "третий"]
toHtmlList : Строка списка -> HTML-сообщение
строки toHtmlList =
  ul [] (строки List.map toLi)
toLi : Строка -> HTML-сообщение
toLi s =
  ли [] [ текст с ]

0

Интересно, я не думаю, что в Elm есть встроенный Element для списков. Я не уверен, было ли это преднамеренным, потому что вы можете свернуть свой собственный *, или просто никому раньше не нужен был нестатический список вещей. (HTML-списки используются на веб-сайте elm-lang.org, но это статические списки, которые, как мне кажется, определены в MarkDown)

Интерполяция Markdown с синтаксисом усов была реализована, но я не уверен в ее статусе. И в любом случае это было не так сильно, как то, что вы описываете.

Генерация необработанного HTML не является частью философии Elm Graphics API. Идея состоит в том, что текущий способ написания веб-сайтов и веб-приложений на HTML/CSS/JavaScript представляет собой беспорядок, даже со всеми библиотеками и т. д., построенными поверх него. Таким образом, способ Elms состоит в том, чтобы наложить на него слой абстракции, чтобы вы могли просто говорить о прямоугольных элементах Element , которые естественным образом складываются по горизонтали и вертикали (с flow *), и произвольных формах Form , которые можно поместить в коллаж (который снова представляет собой прямоугольный элемент ).

* (см. ответ Даниэля для одного с пулями, этот просто голый):

 inputs = ["first", "second", "therth"]
main = поток вниз <| отображать входы в виде простого текста

Вы можете написать маркированный список в Elm, используя коллаж:

 пуля: Элемент
маркер = коллаж 12 20 [круг 3 |> закрашен черным цветом]
визуализация: [строка] -> элемент
рендер = течь вниз.  карта (рядом с маркером . обычный текст)
основное : Элемент
main = визуализировать ["первый", "второй", "третий"]

Живой пример: http://share-elm.com/sprout/538e460fe4b07afa6f981ab6

6

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

HTML: есть ли способ установить "значение" элементов в строку, а не число

Задавать вопрос

спросил

Изменено 3 года, 10 месяцев назад

Просмотрено 795 раз

Здравствуйте, SO,

Я работаю с некоторыми сложными структурами списков, которые необходимо преобразовать в HTML. Вот моя проблема:

Упорядоченные списки имеют фиксированные значения элементов списка, например:

 1. ...
2. ...
2а. ...
2б. ....

Итак, моей первой идеей было использовать свойство "значение" HTML-List-Elements. Нравится:

 
    
    
  • ...
    • 
    
  • ...
    •

Но поскольку List-Element-Value принимает только числа, он напечатает:

 2. ...
2. ...

Есть ли способ получить желаемый результат в

    -Element? Или мне нужно создать свой собственный «список» с поплавком и полями?

    РЕДАКТИРОВАТЬ: Для ясности - я не могу редактировать или переформатировать этот список, так как это законы. Для примера посмотрите: https://www.gesetze-im-internet.de/stgb/__5.html

    Я не могу просто использовать здесь вложенный элемент, так как закон написан не так.

    Редактировать 2: Лучшее, что я придумал, это дать моим

  1. элементам атрибут, например data-li-value="2a. " и в моем css сделайте что-то вроде:

     [data-li-value]::before {
    содержание: attr(data-li-value) " ";
    плыть налево;
    поле справа: 2re;
    поле справа: .5rem;
    поле слева: -.5rem;
}

    При удалении типа списка по умолчанию из элемента li ...

    Спасибо за любую идею и помощь! 🙂

    • html
    • html-списки

    3

    Это решение работает для меня:

      <голова>Пользовательский элемент li <тип стиля="текст/CSS"> пр {
 /*
 Это может понадобиться, если первый элемент не является элементом раздела
 приращение счетчика: счетчик;
 */
 сброс счетчика: счетчик;
 стиль списка: нет;
 }
 .single-item: перед {
 приращение счетчика: счетчик;
 содержимое: counter(счетчик) ")";
 }
 .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *