html — Не маркированный список складывается в линию на мобильном

Вопрос задан

Изменён 5 лет 4 месяца назад

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

Здравствуйте! Подскажите пожалуйста, что не так в верстке? На десктопе список выглядит как надо, строчки располагаются друг под другом, но на мобильном список схлапывается в одну линию, а ссылки в кучу. Что не хватает в коде?

ul.block {
  padding: 0;
  margin: 0;
}

ul.block li {
  padding: 0;
  margin: 10px 0;
  list-style-type: none;
}

.block img {
  display: inline;
  vertical-align: middle;
}
<div>
  <div>Название блока</div>
  <ul>
    <li>
      <img src="" align="left"><a href=""> - пояснение</a>
    </li>
    <li>
      <img src="" align="left"><a href=""> - пояснение</a>
    </li>
    <li>
      <img src="" align="left"><a href=""> - пояснение</a>
    </li>
    <li>
      <img src="" align="left"><a href=""> - пояснение</a>
    </li>
    <li>
      <img src="" align="left"><a href=""> - пояснение</a>
    </li>
  </ul>
</div>
  • html
  • css
  • вёрстка
  • адаптивная-верстка
4

С тем кодом, который вы предоставляете схлопывание в одну линию невозможно.

Скорее всего у вас стоит медиа запрос для малых экранов. Чтобы проверить это откройте вашу страницу на десктопе, для примера браузером Chrome. Откройте дев тулс, выберете просмотр на мобильном, выделите меню, которое показывается не верно и посмотрите какие стили там видны. Так же вы увидите где прописан этот медиа запрос, зайдите у себя в тот файл и исправьте его так, как вам надо.

UPD: то есть вы должны будете увидеть подобную картину:

Посмотрите все стили у ul, посмотрите все стили у li. Возможно нужно прокрутить, чтобы увидеть медиа, а может они вообще с помощью

js проставляются, а может у вас грузится мобильная версия и там все li — блочные. А может, у вас настолько длинные названия элементов списка, и они просто не влезли в экран. А может родителю прописался флексбокс.

С тем кодом, который вы предоставили, увы больше ничем не помочь.

3

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

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

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

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

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

Почта

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

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

Почта

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

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Примеры списков

Примеры списков

Давайте посмотрим, как создаются списки.

Ненумерованный список (unordered list) задается двумя тегами: <UL> и <LI>. UL сдвигает абзац вправо, a LI — ставит пульку (bullet).

Нумерованный список (ordered list) задается тегами <OL> и тем же самым <LI>. Первый тоже сдвигает границу, а второй ставит номер.

Вот пример нумерованного списка:

Пример №8

<OL>
<LI>Первая строка</LI>
<LI>Вторая строка</LI>
<LI>Третья строка</LI>
</OL>

Если нумерованный список нужно начинать не с единицы, используйте параметр START (его аналог — VALUE):

  • <OL START=»4″> — список начнется с четверки.

Теги OL и UL могут иметь атрибут TYPE, задающий тип нумерации или вид пули:

  • в нумерованном списке ТУРЕ=»1″ задает обычную нумерацию, TYPE=»I» — нумерацию большими римскими цифрами, TYPE=»i» — малыми римскими, TYPE=»A» — большими латинскими буквами, TYPE=»a» — малыми латинскими;
  • в ненумерованном списке TYPE=»DISK» задает в качестве пули жирную черную точку, TYPE=»CIRCLE» — кружок, TYPE=»SQUARE» — квадратик.

Вот пример ненумерованного списка

Пример №9

<UL type=»square»>
<LI>Первая cmpoкa<BR>
<LI>Вторая cmpoкa<BR>
<LI>Третъя cmpoкa<BR>
</UL>

Можно создавать также комбинированные и многоуровневые списки. Например, так:

Пример №10

<UL>
<LI>Первая строка<BR>
<LI>Вторая строка<BR>
<UL>
<LI>Третъя строка<BR>
<LI>Четвертая строка<BR>
<UL>
<LI>Пятая строка<BR>
<LI>Шестая строка<BR>
</UL>
</UL>
</UL>

Обратите внимание, что в этом примере мы не задавали в явном виде типы пулек, умный браузер сам на разных уровнях применил разные.

Кстати, тег <LI> можно ставить и без <UL> или <OL>. Не будет сдвига вправо, по умолчанию ставится простая круглая пулька, ноэто можно изменить с помощью параметра TYPE.

Но существует ещё один вид списков — «никак» не маркированный список. А называется он — список терминов (определений). Для этого используем контейнер списка определений <DL>. Внутри него текст оформляется в виде термина, который выделяется непарным тэгом <DT>, и определения, которое следует за тэгом <DD>.

HTML-код, задающий список определений:

Пример №11

<DL>
<DT>Процессop</DT>
<DD>Центральное устройство компьютера, производящее обработку информации в двоичном коде.</DD>
<DT>Оперативная память</DT>
<DD>Устройство, в котором хранятся программы и данные.</DD>
</DL>


Как сделать, чтобы HTML-список отображался без знаков маркеров, используя только CSS?

спросил

Изменено 7 лет, 3 месяца назад

Просмотрено 36 тысяч раз

У меня есть список HTML. Браузер должен видеть существование списка и соответствующим образом располагать элементы, однако я не хочу, чтобы рядом с каждым элементом отображался маркер. То есть нормальный список выглядит так:

  • текст А
  • текст В
  • текст С

Я хочу, чтобы мой список выглядел так:

текст A
текст B
текст C

  • HTML
  • CSS
  • HTML-списки
 ul { стиль списка: нет; }

Это избавляет от маркеров. Теперь вы можете продолжить и назначить стили для их разделения, как в вашем примере, если вы действительно этого хотели:

 li { padding: 5px 0; }

Если вы также не хотите, чтобы в списке был отступ после удаления маркеров, потребуется еще один бит, например:

 ul {
   стиль списка: нет;
   маржа: 0;
   заполнение: 0;
}

Если вы не установите для полей и отступов значение 0, они будут выглядеть правильно либо в FF, либо в IE, но не в обоих

0

Использовать

 стиль списка:нет;

в стиле тега

    Альтернативный вариант

    можно также использовать список определений ( dl , dt , dd ) без терминов определения ( dt элементов).

     <дл>
    
    текст А
    
    
    текст Б
    
    
    текст С

    Но семантически я думаю, что неупорядоченный список ( ul , li ) лучше подходит для вашей конкретной цели 🙂 Так что продолжайте с просто кусок хорошего CSS, как объяснил Эрик.

    1

     <ул.>

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

    list-style-type: верхний латинский;

    0

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

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

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

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

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

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

    Требуется, но никогда не отображается

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

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

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

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

    css. Как правильно включить пустую строку в элемент списка html?

    спросил

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

    Просмотрено 38 тысяч раз

    Предполагая, что у меня есть список:

    • Пункт один
    • Второй предмет очень длинный. На самом деле, он состоит из нескольких разных абзацев. Мне бы очень хотелось, чтобы между вторым и третьим предложением был перерыв, потому что в противном случае все слипнется и его будет действительно трудно читать.
    • Пункт третий

    Как правильно сделать это в HTML/CSS:

    • Пункт первый

    • Второй предмет очень длинный. На самом деле, он состоит из нескольких разных абзацев.

      Я бы очень хотел сделать перерыв между вторым и третьим предложением, потому что иначе все слипнется и его будет очень трудно читать.

    • Пункт третий

    Кажется, некоторые варианты

    ,

    и, возможно, с соответствующим стилем отображения . Вероятно, есть еще больше вариантов, но я надеюсь, что есть правильный/рекомендуемый подход.

    Чтобы разобраться в этом вопросе, предположим, что современные браузеры поддерживают HTML5/CSS3.

    Редактировать: для тех, кто голосует за закрытие вопроса, не могли бы вы оставить комментарий, почему? Если есть какое-то очевидное руководство, которому я должен следовать, пожалуйста, дайте ссылку на него. Учитывая, что в HTML/CSS часто существует несколько способов выполнения задач, я думаю, будет справедливо спросить, существует ли «правильный» способ.

    • HTML
    • CSS
    0

    не рекомендуется, так как это не блочный элемент.

    Вы можете использовать
    для разрыва:

     
      
  
    • 
    Пункт один
  
      • 

  
    • 
    Второй пункт очень длинный. На самом деле, он состоит из нескольких разных абзацев.
    

      Мне бы очень хотелось, чтобы между вторым и третьим предложением был перерыв, потому что в противном случае все слипнется и его будет очень трудно читать.
  
      • 
  
    • 
    Пункт третий
  
      •

    Вы также можете использовать пустой элемент block и установить для него размер с помощью CSS:

     .spacer {
  высота: 10 пикселей;
} 
     Второй элемент очень длинный. На самом деле, он состоит из нескольких разных абзацев.

    Мне бы очень хотелось, чтобы между вторым и третьим предложением был перерыв, потому что иначе все слипнется и его будет очень трудно читать.

    Или тег

    :

     
    Второй пункт очень длинный. На самом деле он состоит из нескольких разных абзацев.
    
    
    Мне бы очень хотелось, чтобы между вторым и третьим предложением был перерыв, потому что в противном случае все слипнется и его будет очень трудно читать.
    1

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

    1

    Просто хотел добавить, что размещение
    или

    вне

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

      Итак, это принято: 

       
        
    
      • 
       .....
    
        
    
        •

      и это не так. 

       <ул>
    
    • 
       .....
    
      •

    Это может быть ясно или логично для многих, но я должен был узнать это сегодня, тем более, что эта ветка подтолкнула меня к тому, что
    — это правильный метод (=элемент), но просто мое размещение было неправильным.

    Я использую

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

    По историческим причинам элемент отображается в виде горизонтальной линии, поэтому вам потребуется немного CSS, чтобы изменить внешний вид.

    No related posts.