Устранение пробелов между горизонтальными элементами

Я пытаюсь создать веб-страницу со схемой, которая показывает, как слово разбивается на битовые поля. Способ, которым я хочу, чтобы он появлялся, - это для каждого поля, чтобы он отображался как ряд ящиков (один бит в поле), а для полей, которые должны быть разделены некоторым пространством. Под каждым полем будет надпись. Это то, что я пробовал:Устранение пробелов между горизонтальными элементами

<HTML> 
<HEAD> 
    <TITLE>Title</TITLE> 
    <STYLE type="text/css"> 
    .left-bit { border-style: solid dotted solid solid; border-width: thin; 
       padding-left: 0.05in; padding-right: 0.05in; 
       margin-left: 0; margin-right: 0; 
       letter-spacing: 0; word-spacing: 0 } 
    .middle-bit { border-style: solid dotted solid none; border-width: thin; 
       padding-left: 0.05in; padding-right: 0.05in; 
       margin-left: 0; margin-right: 0; 
       letter-spacing: 0; word-spacing: 0 } 
    .right-bit { border-style: solid solid solid none; border-width: thin; 
       padding-left: 0.05in; padding-right: 0.05in; 
       margin-left: 0; margin-right: 0; 
       letter-spacing: 0; word-spacing: 0 } 
    .single-bit { border-style: solid; border-width: thin; 
       padding-left: 0.05in; padding-right: 0.05in; 
       margin-left: 0; margin-right: 0; 
       letter-spacing: 0; word-spacing: 0 } 
    .bit-field-label { font-size: smaller; font-weight: bold } 
    </STYLE> 
</HEAD> 
<BODY> 
    <DIV style="text-align: center"> 
    <DIV style="text-align: center; vertical-align: top; display: inline-block"> 
     <CODE> 
     <SPAN class="single-bit">a</SPAN> 
     </CODE><BR> 
     <SPAN style="display: inline-block" class="bit-field-label">field A</SPAN> 
    </DIV> 
    <SPAN style="padding-right: 0.1in"></SPAN> 
    <DIV style="text-align: center; vertical-align: top; display: inline-block"> 
     <CODE> 
     <SPAN class="left-bit">b</SPAN> 
     <SPAN class="middle-bit">b</SPAN> 
     <SPAN class="right-bit">b</SPAN> 
     </CODE><BR> 
     <SPAN class="bit-field-label">field B</SPAN> 
    </DIV> 
    <SPAN style="padding-right: 0.1in"></SPAN> 
    <DIV style="text-align: center; vertical-align: top; display: inline-block"> 
     <CODE> 
     <SPAN class="left-bit">c</SPAN> 
     <SPAN class="middle-bit">c</SPAN> 
     <SPAN class="middle-bit">c</SPAN> 
     <SPAN class="middle-bit">j</SPAN> 
     <SPAN class="right-bit">c</SPAN> 
     </CODE><BR> 
     <SPAN class="bit-field-label">field C</SPAN> 
    </DIV> 
    </DIV> 
</BODY> 
</HTML>

В принципе, я попытался использовать границы, чтобы установить поле для каждого бита; каждое битовое поле и метка под ним должны находиться в своем «ящике» с рядом бит и меткой, расположенными внутри коробки, тогда должен быть промежуток фиксированного размера между каждым ящиком по горизонтали, а затем весь вещь сосредоточена.

Результат почти правильный, за исключением того, что я не могу получить бит в каждом поле, чтобы работать друг против друга. Here's a screenshot. Как вы можете видеть, я попытался избавиться от пространства между битами, установив поля, расстояние между буквами и слово-интервал до 0, но безрезультатно. Я также попытался положить каждую группу в другую DIV, как это:

 <DIV style="display: inline-block"> 
     <SPAN class="left-bit">b</SPAN> 
     <SPAN class="middle-bit">b</SPAN> 
     <SPAN class="right-bit">b</SPAN> 
     </DIV>

, которые не имели никакого эффекта.

Любые идеи относительно того, что контролирует это пространство между ящиками и как переопределить все, что он делает? (Я открыт для других подходов, и мне, возможно, придется попробовать что-то вроде <TABLE>, но я был бы признателен за объяснение того, что происходит, даже если мне нужно изменить мой подход.)

Я использую Chrome 37,0. Я не пробовал это на других браузерах (за исключением более ранней версии IE, который по-видимому, не признает inline-block на всех.)

источник

2014-09-16 ajb

Я считаю, что это то, что вы ищете: http://stackoverflow.com/a/19038859/2680216 –

Crimeney, вы правы. Он отлично работает, если я помещаю все на одну строку без промежуточных пробелов ... – ajb

Также см. Http://stackoverflow.com/questions/4969082/unwanted-margin-in-inline-block-list-items, http: // stackoverflow.com/questions/12183341/how-to-remove-invisible-space-from-html, http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block- элементы, http://stackoverflow.com/questions/13589883/ghost-space-between-inline-block-elements-in-chrome-safari-and-firefox и т. д. и т. д. – 2014-09-16 02:40:09

вы могли бы иметь свой HTML чище, но проблема заключается в display:inline-block создают пробелы, так что вы нужно удалить ненужные пробелы между вашими HTML-тегов или сбросить размер шрифта 0.

проверить его здесь:

Fighting the Space Between Inline Block Elements

Существует несколько решений по ссылке выше.

Плюс вы можете использовать display:block; float:left вместо этого.

источник

2014-09-16 01:18:18 dippas

сочетающих элементы как так удалит пространство

<span style="display:inline-block;">Hello</span><span style="display:inline-block;">World</span>

это хлопоты, я знаю, но это работает так или иначе. вы хотите поместить эти стили во внешнюю таблицу стилей, а не в строку, как у меня есть здесь.

источник

2014-09-16 01:22:34 lordflapjack

Устранение пробелов между горизонтальными элементами

ответ

Смежные вопросы