Question

我想在我的搜索表单右侧显示提交按钮。但我也希望将我的标签保留在表单字段之上。所以它是标签，然后在新行上，搜索按钮在同一行上。

<div class="searchForm">
<form id="UserDisplayForm" method="post" action="/sponster/users/display" accept-charset="utf-8">
<div style="display:none;"><input type="hidden" name="_method" value="POST" /></div>
<div class="input text"><label for="UserSearchForAFriend'sPage">Search For A Friend's Page</label><input name="data[User][Search for a friend's page]" type="text" id="UserSearchForAFriend&#039;sPage" /></div>
<div class="submit"><input type="submit" value="Search" /></div></form> 
</div>

Answer 1

不改变任何标记：

#UserDisplayForm label { display: block; }
#UserDisplayForm div { display: inline-block; }

Here's a working example。我假设您希望样式仅在您的表单中应用，因此我使用#UserDisplayForm作为前缀的规则。

Answer 2

将<label...>和<input...>标记放在<span...>内，而不是<div...>

Answer 3

我会做一些简单的事情：

<... previous elements ...>
<div class="row"> <!-- this is semantically a "form row" -->
   <label style="display: block" ...></label>
   <input type="text"...>
   <input type="submit" ...>
</div>

Answer 4

最简单的方法是将内部 div 标记更改为 span 标记，并添加 br 分隔符以转到下一行.. :)）

<div class="searchForm">
    <form id="UserDisplayForm" method="post" action="/sponster/users/display"
            accept-charset="utf-8">
        <div style="display:none;">
            <input type="hidden" name="_method" value="POST" />
        </div>
        <span class="input text">
            <label for="UserSearchForAFriend'sPage">Search For A Friend's Page
            </label>
            <br>
            <input name="data[User][Search for a friend's page]" type="text" 
                    id="UserSearchForAFriend&#039;sPage" />
        </span>

        <span class="submit"><input type="submit" value="Search" /></span>
    </form> 
</div>

否则，您可以将标签置于单独的 div 标记中，将文本框和按钮置于单独的范围内标签，如下所示。

搜索朋友的页面

Answer 5

试试这个样式表：

.searchForm {
    clear: both;
    display: block;
    width: 150px; /* whatever width you want it to be */
}
    .searchForm .input {
        display: block;
        float: left;
        margin: 0 10px 0 0;
        width: 100px; /* whatever width you want it to be */
    }
        .searchForm .input label { display: none; /* generally people don't want their label showing when making a search field */
        .searchForm .input input { display: block; ... and any other styles ... */

    .searchForm .submit {
        display: block;
        float: right;
        margin: 0 0 0 10px;
        width: 30px; /* again, whatever width you want it */;
    }

这使<div>的浮动正常。您不必须将它们放在<span>中以使其正常工作，这只是懒惰的编码。将你的宽度按照你想要的样式放入你的宽度，它应该工作。这实际上取决于你的其余代码/ css。

祝你好运！

如何让提交按钮与表单字段位于同一行？

5 个答案: