0

テキスト、ドロップダウン ボックス、ボタンがあります。Twitterブートストラップ2.3.2を使用している間、これを1行に表示できません

<div class="well">
    <table>
        <tr>
            <td>Select Company</td>
            <td>
                <select class="span3">
                    <option value="0">Compa1</option>
                    <option value="0">Compa1</option>
                </select>
            </td>
            <td>
                <input type="button" class="btn" value="Go" />
            </td>
        </tr>
    </table>
</div>

私が試した他のバリエーションについて知りたい場合は、次のフィドルを試してください。

http://jsfiddle.net/deostroll/9Hg3K/1/

これを一直線にして美的に（多かれ少なかれ）見せるためのアイデアはありますか？

4

4 に答える 4

2

このように下に追加margin-bottom:0;しますselector。

デモ

CSS 

.sameline {
    display:inline-block;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input{
    margin-bottom:0;
}

label {
    display:inline-block;
    margin-bottom: 5px;
}
于 2013-09-02T09:59:44.423 に答える
1

追加してみるvertical-align: top;

.sameline {
    display: inline-table;
    vertical-align: top;
}

このJSFiddleを確認してください

于 2013-09-02T10:01:32.343 に答える
1

上記の html の場合、次の css は正常に機能して、それらを一直線に並べます

table tr:first-of-type
{
    vertical-align:top;
}
于 2013-09-02T10:42:45.733 に答える
1

ブートストラップに関する広範なドキュメントを参照してください: http://getbootstrap.com/2.3.2/base-css.html#forms

これを行うだけで、フォームは 1 行になります。

<form class="form-inline">
<label>Select Company</label>
<select class="span3">
    <option value="0">Compa1</option>
    <option value="0">Compa1</option>
</select>
<input type="button" class="btn" value="Go" />
</form>

このフォームはすべて 1 行に表示され、フォーム ビットは目的の div/table 内に入ります。

ドキュメントを見ると、ブートストラップで実行できるすべての可能な組み合わせが示されています。これは、ブートストラップの作成者によって記述されているため、おそらく最良のリソースであるため、最初に確認する必要があります。

于 2013-09-02T10:04:30.590 に答える