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

Question

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

альтернативный текст 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

Answer 1

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

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

Answer 2

Удивило, что никто еще не упомянул этот метод:

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

Я добавил DIV#button-container вокруг кнопок и стиль для него, показывая трюк font-size.1009 * Примечание: мне также пришлось изменить расположение на фоновом изображении кнопки, которое вы связали, так как вокруг него было дополнительное пространство в пикселях.Возможно, это было частью проблемы, а может и нет.

Вот ссылка на скрипку: 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>

Answer 3

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

<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" />

А также различные хаки для inline-block:

1. Использование размера шрифта 0px в родительском элементе и сброс размера шрифта в дочерних элементах.

    <div class="parent">
        <div class="child">Some Text</div>
        <div class="child">Some More Text</div>
    </div>

    .parent {
       font-size:0px;
     }

     .parent > * {
       display:inline-block;
       font-size:14px;
     }

2. Поместить все элементы рядом друг с другом, то есть: <div></div><div></div>

3. Размещение закрывающего тега на следующей строке и рядом со следующим элементом, например:

   <div>
   </div><div>
   </div>
   

4. Размещение закрывающей скобки предыдущего элемента на следующей строке и рядом со следующим элементом, то есть:

   <div></div
   ><div></div>
   

5. Или используя html комментарии

   <div></div><!--
   --><div></div>
   

И, как утверждают другие, это не оптимальное решение.

С современными браузерами можно использовать стили Flexbox

<div class="flex">
    <input id="NeedBtn" class="PostBtn flex-child" type="button" />
    <input id="ProvBtn" class="PostBtn flex-child" type="button" />
</div>

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-child {
    -webkit-box-flex: 0 1 auto;
    -moz-box-flex:  0 1 auto;
    -webkit-flex:  0 1 auto;
    -ms-flex:  0 1 auto;
    flex:  0 1 auto;
}

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-child {
    -webkit-box-flex: 0 1 auto;
    -moz-box-flex:  0 1 auto;
    -webkit-flex:  0 1 auto;
    -ms-flex:  0 1 auto;
    flex:  0 1 auto;
}

<div class="flex">
    <input type="button" class="flex-child" id="slide_start_button" value="Start">
    <input type="button" class="flex-child" id="slide_stop_button"  value="Stop">
</div>

Руководство по flex можно найти здесь и список поддержки здесь

Answer 4

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

Answer 5

Попробуйте использовать сброс CSS - это может устранить несоответствие браузера: http://meyerweb.com/eric/tools/css/reset/reset.css

Answer 6

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