Кнопка отправки CSS не прослушивается? - PullRequest
Новая
       8

Кнопка отправки CSS не прослушивается?

0 голосов
/ 25 июля 2011

Я создаю форму электронной почты и хотел бы, чтобы текстовое поле и кнопка отправки были расположены рядом друг с другом.Они должны касаться друг друга так, чтобы он выглядел как один непрерывный прямоугольник.

Однако, когда я касаюсь их и устанавливаю высоту, кнопка отправки не слушает!Это не остается той же высоты.Если я увеличу только высоту кнопки отправки, два поля не будут выровнены!

HTML: 

<div id="form">
    <input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
    <input type="submit" value="BUTTON" id="btn-submit" />
</div>

CSS: 

#form input{
    border: solid 2px #989898;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    outline:none;
    background: #d8d8d8;
    font-weight:bold;
    color: #525252;
    position: relative;
    height: 25px;
}
#address{
    text-align: right;
    margin: 0 30 0 auto;
}
#btn-submit{
    margin-left: -7px;
    width: 44px;
    text-align: center;
}

Ответы [ 4 ]

1 голос
/ 25 июля 2011

Ключом является float:left входов и затем установка высоты для них. Живой пример: http://jsfiddle.net/NweS6/

#form input{
    border: solid 2px #989898;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    outline: none;
    background: #d8d8d8;
    font-weight: bold;
    text-align: right;
    color: #525252;
    float: left;
    height: 25px;
}

#form #btn-submit{
    margin-left: -2px;
    width: 44px;
    text-align: center;
    height: 29px;
}

Причина, по которой для отправки требуется цифра в 4 раза выше, чем для ввода, заключается в том, что по какой-то причине она не учитывает границу кнопки, которая сверху и снизу складывается в 4 пикселя.

0 голосов
/ 25 июля 2011

Кажется, что 2 пикселя не могут работать на входе и кнопке, но с границами в 1 пиксель все нормально.

Посмотрите: http://jsfiddle.net/qwLV7/

Обновление

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

http://jsfiddle.net/qwLV7/1/

Обновление 2

Как это сейчас?

http://jsfiddle.net/qwLV7/2/

CSS 

#form1
{
    border:solid 2px #989898;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    background: #d8d8d8;
    font-weight:bold;
    color: #525252;
    position:relative;
    width:194px;
}

input{
  height:25px;
  border:0px;
}

#address{
    text-align:right;
    margin:0 30 0 auto;
    float:left;
    width:150px;
}

#btn-submit{
    width:44px;
    text-align:center;
    float:left;
}

HTML 

<div id="form1">
    <input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
    <input type="submit" value="BUTTON" id="btn-submit" />
    <div style="clear:both"></div>
</div>
0 голосов
/ 25 июля 2011

Плавающая кнопка отправки и раскладка будет выглядеть как положено.http://jsfiddle.net/4HcWy/9/

0 голосов
/ 25 июля 2011

Вот как вы пишете HTML-форму: 

<form method="POST" action"/page/to_post_to" >
    <input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
    <input type="submit" value="BUTTON" id="btn-submit" />
</form>

Тогда элементы внутри него знают, что это form, а не просто div.

РЕДАКТИРОВАТЬ : Извините, я неправильно понял ваш вопрос. Я думал, что прослушивание означает, что он ведет себя неправильно, а не показывает неправильно.

Вы хотели, чтобы это выглядело как следующее? http://jsfiddle.net/4HcWy/6/

form input
{
    border:2px solid #989898;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    outline:none;
    background: #d8d8d8;
    font-weight:bold;
    color: #525252;
    position:relative;
    height: 25px;
    box-sizing: border-box;
}

#address{
    text-align:right;
    margin:0 30 0 auto;
    border-right: none;
}
#btn-submit{
    margin-left: -7px;
    width:44px;
    text-align:center;
    border-left: none;
}

(Кроме того, поскольку я использовал элемент form, мне пришлось изменить #form input на form input.) *

...