Использование отрицательных полей % для наложения элементов друг на друга
Пытался заставить строки отображаться сложенными и занимающими всю ширину родителя, но что-то смещает последующие строки, только первая строка (выровненная по низу) отображается правильно:
.sp-line{
display: inline-block;
width: 100%;
margin-right: -100%;
position: relative;
z-index: 10;
border-top: 1px dotted #000;
}
.sp_baseline{
border-color: blue;
vertical-align: baseline;
}
.sp_text-bottom{
border-color: green;
vertical-align: text-bottom;
}
.sp_bottom{
border-color: red;
vertical-align: bottom;
}
.sp_text-top{
border-color: green;
vertical-align: text-top;
}
.line{
border: 1px solid cyan;
}
span.text {
background-color: papayawhip;
line-height: 1.96;
}<div class = "line">
<span class = "sp-line sp_bottom"></span>
<span class = "sp-line sp_baseline"></span>
<span class = "sp-line sp_text-bottom"></span>
<span class = "sp-line sp_text-top"></span>
<span class = "text1 text">SINGLE line</span>
</div>Пытаюсь добраться до:
Я просто пытался воссоздать строки из https://christopheraue.net/design/vertical-align. Я не вижу, чего здесь не хватает.
Я не уверен, что понимаю вопрос, но если у вас есть высота строки, это компенсирует уменьшение% от отрицательных полей.
Я не думаю, что изменение высоты строки/удаление ее сильно меняет ситуацию? я только что попробовал
Строки смещены с левой стороны, потому что каждый элемент span имеет небольшую ширину и расположен слева направо в том порядке, в котором они расположены внутри div. Я думаю, что вы должны позиционировать их с помощью position: absolute;, но это ломает vertical-align...
если позволите, в чем тут проблема, мне кажется, все в порядке: codepen.io/anon/pen/YgjPKz
Я хотел, чтобы пунктирные линии выровнялись, чтобы начать с начала div
Почему бы вам не использовать что-то подобное внутри div.line?jsfiddle.net/4sn06p13
Ответы 2
Не нужно делать элемент width:100% и использовать отрицательный запас. Вместо этого вы можете оставить элемент маленьким, чтобы он располагался в одной строке, и полагаться на переполнение, чтобы пунктирные линии покрывали всю область:
.line {
overflow-x:hidden;
}
.sp-line{
display: inline-block;
width: 2px;
position: relative;
z-index: 10;
}
.sp-line:before {
content:"";
position:absolute;
border-top: 1px dotted;
bottom:0;
left:-100vw; /*big value here*/
right:-100vw;/*big value here*/
}
.sp_baseline{
color: blue;
vertical-align: baseline;
}
.sp_text-bottom{
color: green;
vertical-align: text-bottom;
}
.sp_bottom{
color: purple;
vertical-align: bottom;
}
.sp_top{
color: red;
vertical-align: top;
transform:translateY(1px); /*we move the top one by 1px so we can see it*/
}
.sp_text-top{
color: green;
vertical-align: text-top;
}
span.text {
background-color: papayawhip;
line-height: 1.96;
font-size:40px;
}<div class = "line">
<span class = "text1 text">SINGLE line</span>
<span class = "sp-line sp_bottom"></span>
<span class = "sp-line sp_top"></span>
<span class = "sp-line sp_baseline"></span>
<span class = "sp-line sp_text-bottom"></span>
<span class = "sp-line sp_text-top"></span>
</div>Я считаю, что проблема, с которой вы столкнулись, как-то связана с шириной 100% в вашем sp-классе. Необходимо учитывать границу класса .line (голубой контур) и некоторый интервал в шрифте. Я установил ширину, чтобы вычислить ее на 100% меньше 4 пикселей, чтобы удовлетворить это:
.sp-line {
display: inline-block;
width: calc(100% - 4px);
margin-right: -100%;
position: relative;
z-index: 10;
border-top: 1px dotted #000;
}
.sp_baseline {
border-color: blue;
vertical-align: baseline;
}
.sp_text-bottom {
border-color: green;
vertical-align: text-bottom;
}
.sp_bottom {
border-color: red;
vertical-align: bottom;
}
.sp_text-top {
border-color: green;
vertical-align: text-top;
}
.line {
border: 1px solid cyan;
}
span.text {
background-color: papayawhip;
line-height: 1.96;
}<div class = "line">
<span class = "sp-line sp_bottom"></span>
<span class = "sp-line sp_baseline"></span>
<span class = "sp-line sp_text-bottom"></span>
<span class = "sp-line sp_text-top"></span>
<span class = "text1 text">SINGLE line</span>
</div>
Привет. у вас есть образ того, что вы пытаетесь сделать?