如何从单独的表单中获取两个按钮和textareas以显示内联？

Question

我在一个更大的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;
}

Answer 1

您可以更改display

的form属性

form {
   display:inline-block;
}

演示 http://jsfiddle.net/TT7BC/3/

_{请记住，如果它们可以放入其父width中，它将并排显示，以便您可以为.window和form设置固定宽度，或在父{{1}中使用防止项目在新行中断}