текст помещается под маркером в списке CSS

Я пытаюсь сделать так, чтобы весь текст в этом списке совпадал с пулей. Тем не менее, текст переносится под изображение маркера. Попытался изменить отступы / поля на a и li, а также nowrap, но это просто заставило его торчать за правой границей. Пули - это логотипы WBI под News:http://circore.com/womensbasketball/ Есть идеи? Спасибо!

 KatieK06 февр. 2012 г., 19:40
Не могли бы вы добавить исходный соответствующий код в этот вопрос, чтобы в будущем он был полезен людям, у которых может возникнуть такая же проблема?
 PAULDAWG06 февр. 2012 г., 19:49
Код такой же в моем ответе, за исключением спецификации заполнения слева.

Ответы на вопрос(6)

Вам нужно добавитьdisplay: inline-block; на ссылку внутриtd элемент.
Ваш класс выглядел так:

#menu-news li a {
  color: #000000;
  font-family: Arial,Helvetica,sans serif;
  font-size: 13px;
  margin-top: 10px;´
}  

Но нужно выглядеть так:

#menu-news li a {
  display: inline-block;
  color: #000000;
  font-family: Arial,Helvetica,sans serif;
  font-size: 13px;
  margin-top: 10px;
  width: 200px;
}
 Elaine06 февр. 2012 г., 17:49
да! это все ведет себя сейчас. Спасибо вам всем!
Решение Вопроса

Я сделал это на вашем сайте с Firefox, и это работает

#menu-news li:first-of-type {
    border-top: medium none;
    height: 55px;
    list-style-position: inside;
    margin-left: 8px;
    margin-right: 15px;
    padding: 10px 10px 10px 66px;
    vertical-align: top;
}

#menu-news li {
    background: url("images/wbismall.png") no-repeat scroll 0 0 transparent;
    border-top: 1px solid #666666;
    height: 55px;
    list-style-position: inside;
    margin-left: 10px;
    margin-right: 15px;
    padding: 10px 10px 10px 66px;
}

Вы могли бы попробовать

ul {
  list-style-position: outside;
}

но я бы лично использовал фоновое изображение и некоторые отступы, что-то вроде:

li {
    list-style: none;
    background: transparent url(your/icon.png) no-repeat left center;
    padding-left: 20px; /* or whatever the width of your image is, plus a gap */
}

Смотрите эту страницу для более подробной информации:http://www.tm4y.co.za/general-tips/css-bulleted-lists-styling.html

 Elaine06 февр. 2012 г., 17:37
создание фонового изображения пули и снятие пули однако вторая строка текста в ссылке переносится поверх изображения. это все заголовки постов из постов WordPress, так что я не могу добавить в них простую <br>.
 Grim...06 февр. 2012 г., 17:55
Вам нужно дополнить текст, а не изображение - смотрите последние изменения.
 Elaine06 февр. 2012 г., 17:45
изображение является фоновым изображением позади списка, поэтому я не могу добавить к нему отступы.
 Grim...06 февр. 2012 г., 17:42
Вы добавили отступ к элементу, чтобы переместить текст за изображение?

и вот как я это исправил. Важная линияbackground-repeat: no-repeat;, Точки с маркерами будут добавляться к каждой новой строке / элементу списка в вашем списке, но они не будут ставить точку с маркером при переносе текста на следующую строку. Посмотрите на мой код ниже, чтобы увидеть, где я его разместил.

ul {
  margin: 0;
  list-,style-type: none;
  list-style-position: inside;
}
ul li {
    background-image: url(https://someimage.png);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: 0px 5px 100px;
    padding-left: 39px;
    padding-bottom: 3px;
}

Несколько замечаний по моему коду: я использовал изображение для маркеров. Я также использовалbackground-image: вместоlist-style-image: потому что я хотел контролировать размер изображения пули. Вы можете просто использоватьlist-style: свойство, если вы хотите простой маркер, и это должно хорошо работать даже с обернутым текстом. Видетьhttps://www.w3schools.com/cssref/pr_list-style.asp для получения дополнительной информации об этом.

Это работает для неупорядоченных списков:

#menu-news ul    {
 list-style:outside circle;
 margin-left:60px; 
}
#menu-news ul li {
 padding-left:20px;
}

margin-left перемещает весь список на 60px.

padding-left требуется только в том случае, если вам нужно дополнительное пространство между маркером и текстом элемента списка. Текст элемента списка переносится под собой, а не под маркером.

list-style-position: inside; больше ничего не нужно для работы.

Вот рабочий пример:https://codepen.io/sarkiroka/pen/OBqbxv

Ваш ответ на вопрос