Как отобразить в HTML с начальной загрузкой или без нее слово, выровненное после и перед символом ":"?
Я хочу знать, могу ли я отобразить строку в HTML после ':' с таким же расстоянием. Например, у меня есть строки: Имя: Джош и Время: 12: 12: 01. Я хочу отобразить их в центре экрана и после ':' я хочу отобразить вторую часть, как в приведенном ниже коде ... Возможно ли это?
<div>Lastname: Josh</div>
<div>Time: 12:12:01</div>
Моя проблема в том, что время не совсем под фамилией (T точно под L), и я не знаю, как J Джоша может отображаться точно на той же высоте, что и 1 из 12:12:01
Хорошо, это лучший способ спросить, я не уверен, что вы подразумеваете под одинаковой высотой, но если вы обновите свой вопрос, чтобы объяснить это, это будет лучший вопрос. Я думаю, что вы действительно хотите использовать <dl></dl> с `<dt> Lastname: </dt> <dd> Josh </dd>`. Затем вы можете использовать css для выравнивания.
Ответы 3
dt {
display: inline;
}
dd {
margin-left: 80px;
margin-top: -18px;
}<dl>
<dt>Last Name:</dt><dd>Josh</dd>
<dt>Time:</dt><dd>12:12:01</dd>
</dl>Это очень грубо, но вы видите, что с dl у вас явно есть два типа элементов в каждом элементе списка. Вы можете стилизовать каждую часть отдельно. У вас должно получиться добиться того, что вы хотите.
Пожалуйста, проверьте код ниже.
.parent{display:flex}
.title{width:10%}<div class = "parent">
<div class = "title">Last Name:</div>
<div>Josh</div>
</div>
<div class = "parent">
<div class = "title">Time:</div>
<div>12:12:01</div>
</div>dt {
display: inline;
}
dd {
margin-left: 80px;
margin-top: -18px;
}<dl>
<dt>Last Name:</dt><dd>Josh</dd>
<dt>Time:</dt><dd>12:12:01</dd>
</dl>dt {
display: inline;
}
dd {
margin-left: 80px;
margin-top: -18px;
}<dl>
<dt>Last Name:</dt><dd>Josh</dd>
<dt>Time:</dt><dd>12:12:01</dd>
</dl>
Итак, цель состоит в том, чтобы иметь пробелы и, в основном, второй столбец для выравнивания по вертикали?