0

縦に表示されているフォームがあります。

<form action="roseresult.php" method="POST" id='rosesearch'>
<label>Latin Name:</label><input name='latin_name' type='text' />
<label>Common Name:</label><input name='common_name_name' type='text' /></br>
<label>Variety Type:</label><select name="variety">
            <option value="Any">Any</option>
            <option value="Climber/Rambler">Climber/Rambler</option>
            <option value="David Austin">David Austin</option>
            <option value="Floribunda">Floribunda</option>
            <option value="Groundcover">Groundcover</option>
            <option value="Hybrid Tea">Hybrid Tea</option>
            <option value="Patio/Miniature">Patio/Miniature</option>
            <option value="Shrub">Shrub</option></select>
<input name='search' type='submit' value='Search' />
</form>

これをcssで編集して水平に表示するようにしましたが、機能しないようです。float：left;と思いました。それをしますが、しません。

CSS：

#rosesearch {
width:400px;
border-color:#7f2e3f;
padding: 5px 500px 5px 5px;
float:left;
}

#rosesearch legend {
background-color:#7f2e3f;
width:200px;
font-size: 20px;
}

#rosesearch label {
display:block;
font-weight:bold;
text-align:right;
width:140px;
font-size:1.1em;
float:left;
color:#000000;
}

#rosesearch input {
font-size:12px;
padding:4px 2px;
border:solid 1px #000000;
width:244px;
margin:2px 0 20px 10px;
color:#000000;
float:left
}

フォームを水平に表示する他の方法はありますか？

4

2 に答える 2

2

基本的に2つの明らかなオプションがあります。

  1. インラインにしたい入力の各ペアを1つ<div>にまとめ、すべての入力がフォームになるまでこれらのラッパーdivを行として繰り返します。
  2. 2つの「列」divを作成し、それらを一致させる必要がある順序で入力を配置します。

#1はおそらく最も簡単で、最も一貫性があります。上に投稿したフィドルを更新して、意味を示します：http: //jsfiddle.net/3Q7X4/5/

HTML：

<form action="roseresult.php" method="POST" id='rosesearch'>
    <div class="form-row">
        <div class="editor-cell">
            <label>Latin Name:</label>
            <input name='latin_name' type='text' />
        </div>
        <div class="editor-cell">
            <label>Common Name:</label>
            <input name='common_name_name' type='text' />
        </div>
    </div>
    <div class="form-row">
        <div class="editor-cell">
            <label>Variety Type:</label>
            <select name="variety">
                <option value="Any">Any</option>
                <option value="Climber/Rambler">Climber/Rambler</option>
                <option value="David Austin">David Austin</option>
                <option value="Floribunda">Floribunda</option>
                <option value="Groundcover">Groundcover</option>
                <option value="Hybrid Tea">Hybrid Tea</option>
                <option value="Patio/Miniature">Patio/Miniature</option>
                <option value="Shrub">Shrub</option>
            </select>
        </div>
    </div>
    <div class="form-row">
        <input name='search' type='submit' value='Search' />
    </div>
</form>

CSS：

form#rosesearch
{
    width:700px;
}

#rosesearch legend {
background-color:#7f2e3f;
width:200px;
font-size: 20px;
}

#rosesearch label {
display:block;
font-weight:bold;
text-align:right;
width:140px;
font-size:1.1em;
float:left;
color:#000000;
}

#rosesearch input {
font-size:12px;
padding:4px 2px;
border:solid 1px #000000;
width:244px;
margin:2px 0 20px 10px;
color:#000000;
float:left
}

#rosesearch div.form-row
{
    width:100%;
    display:block;
    margin-bottom:2em;
    overflow:auto;
    zoom:1;
}


#rosesearch div.form-row div.editor-cell
{
    float:left;
    width:300px;
    vertical-align:top;
}

編集：フィドルを更新しました。かなりラフですが、私が何をしているのか見ていただければ幸いです。

于 2012-04-22T19:04:28.160 に答える
1

これは#rosesearch、#rosesearch label幅がすべての入力を水平方向に含めるのに十分な大きさではないためです。

width大きくするか削除して、ブラウザに処理させる必要があります。

于 2012-04-22T18:40:11.087 に答える