У меня две формы внутри большего div. В каждой форме есть кнопка для щелчка и текстовая область. Я добавил div внутри форм для стилизации кнопок, как мне нравится. Я хочу, чтобы две кнопки шли бок о бок со своими соответствующими текстовыми областями под ними. "display: inline: block", похоже, не делает этого для меня...
Вот как они выглядят сейчас.
Вот мой 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;
}
Вы можете изменить свойство display
для своей form
form {
display:inline-block;
}
Демо-версия http://jsfiddle.net/TT7BC/3/
Помните, что он будет отображаться бок о бок, если они могут вписаться в его родительскую width
поэтому вы можете установить фиксированную ширину для .window
и form
или использовать в родительском white-space:nowrap
чтобы предотвратить разбиение элементов в новой строке