html - 如何从不同的表单中获取两个按钮和文本区域以内联显示？

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

您可以更改 form 的 display 属性

form {
   display:inline-block;
}

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

_{请记住，如果它们适合他的父级 width，它将并排显示，因此您可以为 .window 和 form< 设置固定宽度 或在父级 white-space:nowrap 中使用以防止元素换行}