Как я могу получить две кнопки и текстовые поля из отдельных форм для отображения в строке?

0

У меня две формы внутри большего div. В каждой форме есть кнопка для щелчка и текстовая область. Я добавил div внутри форм для стилизации кнопок, как мне нравится. Я хочу, чтобы две кнопки шли бок о бок со своими соответствующими текстовыми областями под ними. "display: inline: block", похоже, не делает этого для меня...

Вот как они выглядят сейчас.

Изображение 174551

Вот мой HTML.

<div class="window">

    <form class="sumform" action="#" method="post">
        <div class="btns btn_sum">
            <input type="submit" id="sub_sum" value="Summary Statistics"/>
        </div>
        <input type="text" id="sum_spec"/>
    </form>

    <form class="histform" action="#" method="post">
        <div class="btns btn_hist">
            <input type="submit" id="sub_hist" value="Histogram"/>
        </div> 
        <input type="text" id="hist_spec"/>
    </form>

</div>

Вот мой CSS:

.window {
    background-color: #fdf2e3;
    display: inline-block;    
    text-align: left;
    width:100%;
    font-size: 12px;
}

div.btns input {
    cursor:pointer;
    padding-top:40px;
    padding-bottom:60px;
    width:130px;
    height:0px;
    border-radius: 6px;
    background-color:#3acb9a;
    border: none;
    text-align:center;
    display:inline-block;
    color:#ffffff;
    font-size:12px;
}
Теги:

1 ответ

3
Лучший ответ

Вы можете изменить свойство display для своей form

form {
   display:inline-block;
}

Демо-версия http://jsfiddle.net/TT7BC/3/

Помните, что он будет отображаться бок о бок, если они могут вписаться в его родительскую width поэтому вы можете установить фиксированную ширину для .window и form или использовать в родительском white-space:nowrap чтобы предотвратить разбиение элементов в новой строке

  • 0
    Да, или поплавок будет работать так же.
  • 0
    Отлично! Сработало сразу!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню