Текст обертывается под маркой в списке css

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

Ответ 1

Я сделал это на вашем сайте с 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;
}

Ответ 2

Вы можете попробовать

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

Ответ 3

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

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

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

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

Ответ 4

Вам нужно добавить 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;
}