Вы хотите что-то в соответствии с тем, что у меня здесь. Вам придется экспериментировать для совершенствования пикселей. Причина, по которой я не использую список определений, заключается в том, что вы не можете манипулировать обоими определениями как блоком, на что это основывается. Ключевым элементом здесь является установка высоты строки вручную. Точная разметка здесь не важна, но это можно сделать одним из способов.
<h2>MONDAY</h2>
<ul>
<li>hi</li>
<li>blah</li>
</ul>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px 0 0 100px;
}
h2 {
font: 40px sans;
width: 200px;
line-height: 36px;
float: left;
}
ul {
height: 40px;
float: left;
list-style-type: none;
margin-top: -2px;
}
li {
font: 16px sans;
line-height: 16px;
margin-top: 2px;
}
(Еще одним полезным свойством может быть вертикальное выравнивание , которое можно использовать для позиционирования текста в текстовой строке, а не для сокращения текстовой строки до размера текста.
Также обратите внимание, что физический текст будет выглядеть меньше, чем установленная вами высота текста, потому что вам нужно учитывать спусковые элементы - части букв, которые идут ниже текстовой строки, такие как строчные буквы g, p, y и т. Д. Вот почему вам нужно играть с точным количеством пикселей, если вы измените размер текста. В зависимости от шрифта также может быть разный - вам нужен хорошо поддерживаемый кроссплатформенный, чтобы получить хорошие результаты на всех платформах.)