HTML | CSS: пробел между кнопками ввода

У меня есть проблема, в которой у меня есть пробел между этими двумя кнопками, как показано на рисунке ниже:

alt text http://img22.imageshack.us/img22/5066/capturebtn.png

Код выглядит следующим образом:

<input id="NeedBtn" class="PostBtn" type="button" />
<input id="ProvBtn" class="PostBtn" type="button" />

.PostBtn
{
   background: url(../Images/Buttons/PostButtonF.png) no-repeat;
   width: 50px;
   height: 28px;
   border: none;
   margin: 0;
   padding: 0;
}
#NeedBtn
{
   background-position: 0 0;
}
#ProvBtn
{
   background-position: -50px 0;
}

Как удалить это пространство?

Браузер: Firefox 3.5

IE8

Ответы

Ответ 1

Линия между двумя <input> создает пространство между ними на странице. Вы должны удалить фид строки или использовать этот трюк:

<input id="NeedBtn" class="PostBtn" type="button" /><!--
--><input id="ProvBtn" class="PostBtn" type="button" />

Ответ 2

Удивленный никто еще не упомянул об этом методе:

Проблема заключается в том, что выполняется пробел между двумя кнопками. Любое белое пространство (разрывы строк, табуляции, пробелы) между кнопками будет отображаться как одно пространство браузером. Чтобы исправить это, вы можете установить для font-size значение 0 в родительском элементе.

Я добавил DIV#button-container вокруг кнопок и стиль для него, показывающий трюк font-size.

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

Здесь ссылка на скрипт: http://jsfiddle.net/dHhnB/ и код:

<style>
#button-container
{
   font-size:0;    
}
.PostBtn
{
   background: url(http://img22.imageshack.us/img22/5066/capturebtn.png) no-repeat;
   width: 50px;
   height: 28px;
   border: none;
   margin: 0;
   padding: 0;
}
#NeedBtn
{
   background-position: -4px 0;
}
#ProvBtn
{
   background-position: -59px 0px;
}
</style>
<div id="button-container">
    <input id="NeedBtn" class="PostBtn" type="button" />
    <input id="ProvBtn" class="PostBtn" type="button" />
</div>

Ответ 3

Как указывали другие, вы можете использовать float для противодействия пробелу между элементами

<input id="NeedBtn" class="PostBtn floated" type="button" />
<input id="ProvBtn" class="PostBtn floated" type="button" />

.floated {
   float:left;
}


.floated {
  float:left;
}
<input id="NeedBtn" class="PostBtn floated" value="Next" type="button" />
<input id="ProvBtn" class="PostBtn floated" value="Prev" type="button" />

Ответ 4

Вы можете использовать css, чтобы исправить это. Установите float: left или float: прямо на кнопки ввода. Это поставило проблему для меня.

Ответ 6

Я вижу, что они имеют высоту и ширину набора. Добавление переполнения: скрытый должен скрывать пробелы вне вашей определенной ширины. Это альтернатива устранению пробелов, как отметил @Пикрасс. Обычно пробел является проблемой IE, я раньше не заметил его в FF.