В приведенном ниже примере я пытаюсь добавить некоторые линейные элементы входного диапазона, которые выровнены по линии, но также выровнены по правому краю внешнего элемента div. На реальном сайте html - это код, который был пропущен через prettify , поэтому это не что иное, как <span> элементы внутри элемента <pre>, поэтому пробельные символы и, в частности, перевод строки, актуальны.
В любом случае я вставляю эти <input type="range"> элементы, обернутые в 2 делителя, и пытаюсь выровнять их по содержимому в той же строке, но справа от внешнего контейнера.
На самом деле я не нашел решения. Первоначально у меня был нормальный размер шрифта, и если бы я добавил какое-то постороннее содержимое внутри .holder s, то казалось бы, что выровнялись, но в действительности, как только я увеличил размер шрифта, это показало, что они на самом деле не выравнивались.
Есть ли каким-то образом это исправить?
Я понимаю, что обычно вы можете сделать что-то подобное с таблицей (отдельный столбец для ползунков) или flexbox, но для этого потребуется синтаксический анализ всего кода, чтобы найти разрывы строк, а затем сгенерировать куча новых html.
.outer {
position: relative;
background: pink;
padding: 1em;
width: 200px;
}
.holder {
display: inline-block;
}
.holder>div {
position: absolute;
display: inline-block;
right: 0;
}
.holder input {
position: absolute;
display: inline-block;
right: 1em;
}
<h1>test</h1>
<div class="outer">
<div>
<span>foo: </span>
<div class="holder">
<div>
<input type="range">
</div>
</div>
</div>
<div>
<span>bar: </span>
<div class="holder">
<div>
<input type="range">
</div>
</div>
</div>
</div>
Примечание. Приведенный выше код показывает проблему, но реальный код - это пробелы, чувствительные к пробелам и интервалам, которые трудно читать. Вот оно.
body {
font-size: 35pt;
}
.outer {
position: relative;
background: pink;
padding: 0.2em;
width: 300px;
}
.holder {
display: inline-block;
}
.holder>div {
position: absolute;
display: inline-block;
right: 0;
}
.holder input {
position: absolute;
display: inline-block;
right: 1em;
}
foo:
bar:
Как я уже говорил выше, генерируются <pre> и <span>, после чего я вставляю входы диапазона.
Еще один недостаток заключается в том, что на реальном сайте секция <pre> получает полосы прокрутки, если строка слишком длинная (как в области кода SO), но в этом случае мне все же нужны области ввода справа от видимой области ( если вы не прокручивали).
body {
font-size: 35pt;
}
.outer {
position: relative;
background: pink;
padding: 0.2em;
width: 300px;
overflow: auto;
}
.holder {
display: inline-block;
}
.holder>div {
position: absolute;
display: inline-block;
right: 0;
}
.holder input {
position: absolute;
display: inline-block;
right: 1em;
}
longlongline:
bar:
Скриншот окончательного результата, вероятно, поможет.
Обычно ползунки встроены (не CSS, кроме display: inline-block), но если окно недостаточно широкое, ползунки будут сдвинуты выкл. Поэтому вместо этого я делаю их прозрачными и использую абсолютное позиционирование, чтобы они не отталкивались. Таким образом, вы все равно можете как читать код, так и взаимодействовать с ползунками.
Они выглядят для выравнивания банкомата, но если вы go до страницы и убедитесь, что ваше окно меньше 450px Широкий и установите размер шрифта prettyprint.pre, скажем, 15pt, тогда вы увидите, что выравнивание - это просто удача, и что они на самом деле не «выровнены», это просто определенные размеры различных вещей, которые делают их выровненными.
Я полностью понимаю, что они могут на самом деле не быть решением, за исключением разбора кода и разделения каждой строки в свой собственный контейнер, но если возможно, я бы нравится использовать правильный CSS (при условии, что он существует), чтобы выровнять их.