Подтвердить что ты не робот

Как контролировать размер диска в стиле списка в CSS?

Сначала мой HTML:

<ul class="moreLinks" >
    <div>More from Travelandleisure.com</div>

        <li><a rel="nofollow" href="">xyz1</a></li>
    <li><a rel="nofollow" href="">xyz1</a></li>
    <li><a rel="nofollow" href="">xyz1</a></li>
</ul>

Я знаю, что могу применить размер шрифта на ли очень маленьком, чтобы диск выглядел корректно для меня, а затем применил css к "a" внутри li. Но я не знаю, почему это не работает на сайте, на котором я работаю. Я не могу напрямую управлять html.

Я видел это, когда я делаю это:

.farParentDiv ul li {
    list-style: disc inside none;
}

К этому:

.farParentDiv ul li {
    list-style-type: disc;
    font-size:10px;
}

и теперь после применения размера шрифта к "a" он работает в Firebug. но из моего файла css. Я много пробовал, но устал. Я могу перезаписать выше это в файле css, но не могу изменить его напрямую, как это было в firebug. Пожалуйста, напишите, что может быть проблемой?

Я использовал, чтобы положить точки (.) непосредственно перед ссылкой внутри, а затем применить css для управления размером диска, но, как я уже сказал, я не могу контролировать HTML.

4b9b3361

ОТВЕТЫ

Ответ 1

Мне всегда удавалось использовать фоновые изображения вместо того, чтобы доверять всем браузерам, чтобы точно интерпретировать пулю. Это также даст вам жесткий контроль над размером пули.

.moreLinks li {
    background: url("bullet.gif") no-repeat left 5px;
    padding-left: 1em;
}

Кроме того, вы можете переместить DIV за пределы UL. Это неверная разметка, как сейчас. Вы можете использовать заголовок списка LH, если он должен быть внутри списка.

Ответ 2

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

li {
    list-style: none;
    font-size: 20px;
}

li:before {
    content:"·";
    font-size:120px;
    vertical-align:middle;
    line-height:20px;
}

Демо: http://jsfiddle.net/4wDL5/

Маркеры ограничены появлением "внутри" с помощью этого конкретного CSS, хотя вы можете его изменить. Это определенно не самый лучший вариант (браузер должен поддерживать сгенерированный контент, поэтому нет IE6 или 7), но он может быть самым простым - плюс вы можете выбрать любой символ, который вы хотите для маркера.

Если вы идете по маршруту изображения, см. list-style-image

Ответ 3

Помимо использования пользовательских изображений для пуль, вы можете также стилизовать элементы ul или li в один конец, а затем по-разному стилизовать содержимое, как показано здесь.

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

Ответ 4

попробуйте использовать diff font-size для li и

.farParentDiv ul li {
   list-style-type: disc;
   font-size:20px;
}

.farParentDiv ul li a {
   font-size:10px;
}

это спасло меня от использования изображений

Ответ 5

Вместо того, чтобы использовать position: absolute, text-indent можно использовать для решения проблемы "внутри":

li {
    list-style: inherit;
    margin: 0 0 4px 9px;
    text-indent: -9px;
}
li:before {
    content: "· ";
}

http://jsfiddle.net/poselab/zEMLG/

Ответ 6

Самый простой способ для меня - использовать символы Unicode, а затем стилизовать их с помощью тегов span. Я использую inline css для примера, но вы можете сделать это, как бы вы ни предпочли.

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

<li style="list-style:none;"><a href=""><span style="font-size:x-small;vertical-align:middle;">&#9608;</span>&nbsp;&nbsp;HOME</a></li>

Здесь вы можете найти много юникодных патронов:

http://unicode-table.com/

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

Ответ 7

Я удивлен, что никто не упомянул свойство style-image

ul {
    list-style-image: url('images/ico-list-bullet.png');
}

Ответ 8

Я думаю, используя контент "."; Точка становится слишком квадратной, если ее сделать слишком большой, поэтому я считаю, что это лучшее решение, здесь вы можете определить размер "диска", не влияя на размер шрифта.

li {
    list-style: none;
	  display: list-item;
	  margin-left: 50px;
}

li:before {
    content: "";
	  border: 5px #000 solid !important;
	  border-radius: 50px;
	  margin-top: 5px;
	  margin-left: -20px;
	  position: absolute;
}
<h2>Look at these examples!</h2>
<li>This is an example</li>
<li>This is another example</li>

Ответ 9

Вы также можете использовать 2D-преобразование. Это показано в нижеприведенном фрагменте, при этом список масштабируется на 25%.

Nota​​strong > : Bootstrap используется здесь с единственной целью разметки демонстрации (эффект до/после).

ul#before {
}

ul#after {
  transform: scale(1.25);
}

div.container, div.row {
  padding: 20px;
}

ul {
  border: 6px solid #000000;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'; return false;" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Bootstrap theme -->
<link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css'; return false;" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- HTML -->
<div class="container">
  <div class="row">
    <div class="col-xs-5">
      Before
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      After (scale 25%)
    </div>
  </div>

  <div class="row">
    <div class="col-xs-5">
      <ul id="before">
        <li>Lorem ipsum dolor sit amet...</li>
        <li>In vel ante vel est accumsan...</li>
        <li>In elementum libero vel...</li>
        <li>Nam ut ante a sem mattis...</li>
        <li>Curabitur fermentum nisl...</li>
        <li>Praesent vel risus ultrices...</li>
      </ul>
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      <ul id="after">
        <li>Lorem ipsum dolor sit amet...</li>
        <li>In vel ante vel est accumsan...</li>
        <li>In elementum libero vel...</li>
        <li>Nam ut ante a sem mattis...</li>
        <li>Curabitur fermentum nisl...</li>
        <li>Praesent vel risus ultrices...</li>
      </ul>
    </div>
  </div>
</div>

<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>