Question

我有一个垂直显示的表单：

<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
}

还有其他方法可以让表格水平显示吗？

Answer 1

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

将您想要内联的每对输入放在一个<div>中，将这些包装器div重复为行，直到所有输入都在表格，或
创建两个＆＃34;列＆＃34; 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;
}

编辑：刚刚更新了小提琴。它相当粗糙，但我希望你能看到我的目标。

Answer 2

这是因为#rosesearch和#rosesearch label宽度不够大，无法横向包含所有输入。

你需要让width更大或删除，让浏览器处理它。

使表单域显示为水平而不是垂直

2 个答案: