Создание эквивалента табуляции с помощью CSS, первая запись в той же строке

Question

Я пытаюсь сделать что-то очень классическое для обработки текста, но, очевидно, менее распространенное в CSS. Я помещаю информацию о фильме на веб-сайт и хочу отформатировать информацию следующим образом:

Режиссер: Джон Смит
В ролях: человек А
Человек B
Человек C
Сценарист: Джеймс Смит

Да, так как мне это сделать? Проблема в том, что я пытаюсь отформатировать заголовки (режиссер, актерский состав и т. Д.) Иначе, чем обычный текст. Вот что у меня есть прямо сейчас:

<div>
    <h3>Director: <span style="font-weight:300;">John Carney</span></h3>               <h3>Writer: <span style="font-weight:300;">John Carney</span></h3>
    <h3>Cast: <span style="font-weight:300;">Keira Knightley<br>Mark
    Ruffalo</span></h3>
  </div>

Любая помощь приветствуется, спасибо!

html css web space

1

singmotor 13 Авг 2014 в 04:31

Answer 1

Как насчет того, чтобы основывать его на списке описаний, как предлагает @vch?

Демо: http://jsfiddle.net/dt2v7zys/2/

<dl>
    <dt>Director:</dt>
    <dd>John Carney</dd>

    <dt>Writer:</dt>
    <dd>John Carney</dd>

    <dt>Cast:</dt>
    <dd>
        <ul>
            <li>Keira Knightley</li>
            <li>Mark Ruffalo</li>
        </ul>
    </dd>
</dl>

Создан с использованием ...

dt {
    float: left;
    width: 80px;
    padding: 4px;
}
dd {
    margin-left: 88px;
    padding: 4px;
}

В качестве альтернативы dt может иметь несколько значений dd, которые определяют / описывают его, например:

Демо: http://jsfiddle.net/dt2v7zys/1/

<dl> 
    <dt>Director:</dt>
    <dd>John Carney</dd> 

    <dt>Writer:</dt>
    <dd>John Carney</dd> 

    <!-- note the multiple values for a single dt -->
    <dt>Cast:</dt>
    <dd>Keira Knightley</dd>
    <dd>Mark Ruffalo</dd>

    <dt>Producer:</dt>
    <dd>Another Guy</dd> 
</dl>

0

Tim M. 13 Авг 2014 в 05:00

Это не форматирует содержимое, как описано в вопросе. Разницы в стиле текста нет, есть маркеры, которых нет в описании.

–

Jukka K. Korpela

13 Авг 2014 в 09:22

@JukkaK.Korpela - я предоставил 3 разных способа форматирования контента (в том числе тот, который показывал стили текста, в комментарии к другому ответу: jsfiddle.net/dt2v7zys/3). Использование ненумерованного списка, конечно же, необязательно ("маркеры, которых нет в описании"), что является лучшей альтернативой, чем br для разделения элементов. Если ненумерованный список не нужен, можно использовать вторую демонстрацию (несколько dd).

–

Tim M.

13 Авг 2014 в 09:32

Answer 2

Сделать это можно так:

<div>
  <h3><span>Director:</span>John Carney</h3>
  <h3><span>Cast:</span>Keira Knightley<br>Mark Ruffalo</h3>
  <h3><span>Writer:</span>James Smith</h3>
</div>

И тогда в вашей таблице стилей:

h3 {
  font-weight: normal;
  padding-left: 200px;
}

h3 span {
  display: inline-block;
  min-width: 200px;
  height: 100%;
  font-weight: bold;
  margin-left: -200px;
}

1

Arnelle Balane 13 Авг 2014 в 04:39

Answer 3

Для этого html вы можете использовать следующий css:

h3 {
  font-weight: bold;
}
h3 span {
  font-weight: normal;
}

0

Guy 13 Авг 2014 в 04:36

Да, это было бы чище для стиля, спасибо. Однако большое дело здесь в выравнивании.

–

singmotor

13 Авг 2014 в 04:38

Answer 4

Думаю, вам нужен список определений: <dl>, <dt>, <dd>. Есть несколько примеров, в том числе css здесь.

3

vch 13 Авг 2014 в 04:37

Да, я смотрел на них, но тогда первое слово не появляется после «определения», оно появляется в строке ниже, и я хочу, чтобы первое слово соответствовало «определению», а затем все остальные выстраивались под ним. .

–

singmotor

13 Авг 2014 в 04:41

1

Из коробки, да. Но посмотрите код ниже от @tim. Если вы посмотрите на его jsfiddle, вы увидите, что он использовал css, чтобы он отображался в нужном вам формате.

–

vch

13 Авг 2014 в 05:05

Ага, видел! Спасибо @Tim Medora и всем остальным!

–

singmotor

13 Авг 2014 в 05:09

Боковой комментарий (можно публиковать только каждые 90 минут): как сделать так, чтобы

имел тот же стиль, что и

?

–

singmotor

13 Авг 2014 в 05:23

Вы можете стилизовать dt как хотите, например. jsfiddle.net/dt2v7zys/3. Или, если у вас уже есть стиль, определенный для h3, вы можете скопировать его в селектор dt.

–

Tim M.

13 Авг 2014 в 05:32

Answer 5

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

<style>
th { text-align: left }
th, td { vertical-align: top }
</style>
<table>
<tr><th>Director: <td>John Smith
<tr><th rowspan=3>Cast:<td>Person A
<tr><td>Person B
<tr><td>Person C
<tr><th>Writer: <td>James Smith 
</table>

По умолчанию элементы th отображаются жирным шрифтом. Различие между обычным и жирным шрифтом (font-weight: normal и font-weight: bold) - единственный надежный способ изменить толщину шрифта, поскольку у большинства шрифтов нет другой толщины. Это означает, что для большинства шрифтов font-weight: 300 вызывает использование шрифта с нормальным весом.

0

Jukka K. Korpela 13 Авг 2014 в 09:21

Создание эквивалента табуляции с помощью CSS, первая запись в той же строке

5 ответов

?

Похожие вопросы

Новые вопросы

html