Как сделать пробельного агностика HTML-разметки?
Править: Существует почти тот же вопрос при Удалении пробела между элементами HTML при использовании разрывов строки, однако кроме предложения "плавающего", я не нахожу ни один из ответов подходящим для моих требований. Я хотел бы, чтобы это осталось открытым для более инновационных предложений
Если Вы имеете последовательный inline-blocks пробел становится значительным. Это добавляет некоторый уровень пространства между элементами. Каков "корректный" способ избежать пробельного эффекта к HTML-разметке, если Вы хотите, чтобы те блоки выглядели придерживавшимися друг друга?
Пример:
a
b
Это представляет по-другому, чем:
ab
из-за промежутка пространства. Я хочу пробельный эффект уйти, не ставя под угрозу расположение исходного кода HTML. Я хочу, чтобы мои шаблоны HTML остались чистыми и хорошо расположенными с отступом.
Я думаю, что эти опции ужасны:
1) Тонкая настройка text-indent, margin, padding и т.д. (Поскольку это зависело бы от размера шрифта, пробельная ширина по умолчанию и т.д.),
2) Помещение всего на одной строке, друг рядом с другом.
3) Нуль font-size. Это потребовало бы переопределяющего размера шрифта в блоках, которые будут иначе наследованы.
4) Возможные решения всего документа. Я хочу решение остаться локальным для определенного блока HTML.
Какие-либо идеи, какая-либо очевидная суть, которую я упускаю?
4 ответа
Вы не должны использовать версию без пробелов между элементами, просто заставьте все работать с пробелом. Возможно, вам потребуется установить для встроенных элементов значение display: block , чтобы добиться правильного макета.
Взгляните на этот похожий мой вопрос , на который есть несколько хороших ответов.
Изменить: Один из ответов на вышеуказанный вопрос предполагает использование комментариев HTML в крайнем случае, например:
<span>a</span><!--
--><span>b</span>
Вы могли также используйте межсловный интервал :
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Inline-blocks without whitespace between</title>
<style>
html,
body
{
background: #fff;
padding: 0;
margin: 0;
}
p
{
background: #9ab;
text-align: center;
margin: 50px;
padding: 0 20px;
word-spacing: -.3em;
}
span
{
display: inline-block;
padding: 3px;
color: #def;
background: #678;
word-spacing: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0)
{
/**
* Since WebKit fails on word-spacing for
* inline-block … we have to hack.
*/
span
{
margin: 0 -.2em;
}
}
</style>
<p>
<span>Inline-block<br>number 1</span>
<span>Inline-block<br>number 2</span>
<span>Inline-block<br>number 3</span>
</p>
если ваша проблема заключается в избыточных пробелах или отдельных разделах / использование "ul" с соответствующим css может выполнить вашу работу /
, конечно, это reset.css /
html:
<ul id="uList">
<li><img src="#" alt="img"/></li>
<li><img src="#" alt="img"/></li>
<li><img src="#" alt="img"/></li>
<li><img src="#" alt="img"/></li>
</ul>
css:
ul#uList, ul#uList li, ul#uList li img{display:block; float:left;}
У меня была такая же проблема с недавним плагином I развивался. Поскольку я использовал inline-block , и поскольку плагин требовал абсолютно нулевого пространства между элементами, и я никогда не знал, что это за элементы, мне пришлось придумать решение, которое не требовало бы пользователя вмешательство.
Вот:
function removeWhiteSpace(raw) {
var cleaned_string = raw.replace(/[\r+\n+\t+]\s\s+/g, "");
return cleaned_string;
}
Javascript кажется единственным реальным решением проблемы. Я извлекаю данные HTML с помощью jQuery, а затем пропускаю их через эту функцию, чтобы очистить их.