CSS внутри обычного текста

0

Я чувствую, что это то, что должно быть легким решением, но я в тупике. Я хотел бы, чтобы каждый элемент в списке был разделен (inline) "list-block", но я не могу заставить блоки отображаться с помощью чего-либо, кроме тегов div, которые автоматически переходят на новую строку. Я бы просто использовал HTML-символы (например, ниже), но я хочу настроить CSS. Заранее спасибо!

Сценарий: http://jsfiddle.net/sos12/UwsFL/

CSS:

.list-block {
  width: 1%;
  height:0;
  padding-bottom: 1%;
  -moz-border-radius: 1%;
  -webkit-border-radius: 1%;
  border-radius: 1%;
  background: black;
}

Метки:

<h2>
   Apples 
      <i class="list-block"></i>
   Pears
      <div class="list-block"></div>
   Peaches
      <span class="list-block"></span>
   Plums 
      <a class="list-block"></a>
   Grapes  
</h2>

HTML-символы:

<h2>
  Apples 
    &diams;
  Pears
    &diams;
  Peaches
    &diams;
  Plums 
    &diams;
  Grapes  
</h2>
  • 1
    Так как вы хотите, чтобы это выглядело?
  • 0
    Яблоки Груши Персики Сливы Виноград (но с CSS вместо HTML-бриллиантов)
Показать ещё 4 комментария
Теги:
formatting

3 ответа

1
Лучший ответ

Если вы хотите, чтобы элементы находились в одной строке и имели атрибуты элемента блока (например, div), вы должны использовать display: inline-block. Затем вы можете использовать margin для управления интервалом между ними:

.list-block {
    width: 1%;
    height:0;
    padding-bottom: 1%;
    -moz-border-radius: 1%;
    -webkit-border-radius: 1%;
    border-radius: 1%;
    background: black;

    display: inline-block;
    margin: 5px;
}

Если вы хотите повернуть элементы, чтобы сделать их бриллиантами, просто используйте преобразование (обратите внимание, что это CSS3 и не поддерживается в действительно старых браузерах):

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);

JSFiddle

Поделиться
0

Для списка обычно используйте стиль стиля списка http://jsfiddle.net/UwsFL/2/

li {
    list-style-type:square;
    font-size:2em;/* to show that squares follow font-size */
}

Но внутри титула уль нет места :). Ваш подход с объектами html - хорошая идея, может быть, вам нужно использовать слово-интервал? http://jsfiddle.net/UwsFL/3/

h2 {
    text-align:center;
    word-spacing:1em;
}

Вы также можете использовать псевдоэлемент и стилизовать их: http://jsfiddle.net/UwsFL/5/ (only in between)

h2 {
    text-align:center;
}
h2 span {
    display:inline-block;
}
h2 span:before {
    content:'\29eb';
    padding:0 0.5em;
}
h2 span:first-of-type:before {
    content:'';
}

или вокруг: http://jsfiddle.net/UwsFL/6/

Надеюсь, что эти примеры дают вам некоторое представление :)

Поделиться
0

Добавить display:inline-block.

Это позволит вам сделать <div> в той же строке или позволить вам указывать ширину (и высоту) для другого встроенного элемента.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню