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 中对其进行了编辑以尝试使其水平显示，但它似乎不起作用。我以为浮动：左；会这样做，但它不会。

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

你基本上有两个明显的选择：

  1. 将您想要内联的每一对输入放在一个中<div>，将这些包装器 div 作为行重复，直到您的所有输入都在表单中，或者
  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 回答