Question

我有这个html结构：

<form id="signUpForm" action="login.php" method="post">
    <h3>Please enter your details below:</h3>
    <br />

    <p>Name: </p>
    <input id="name" name="name" type="text"></input>
    <br />

    <p>Email: </p>
    <input id="email" name="email" type="text"></input>
    <br />

    <p>Company: </p>
    <input id="company" name="company" type="text"></input>
    <br />

    <p id='required'>* All fields are required</p>

    <p>Enquiry Details</p>
    <textarea></textarea>

    <input id="signUpSubmit" type="submit" value="Send"></input>
</form>

这个表单位于html中的div元素下面，但div元素有float：left，所以div和form并排放置。我想要做的是垂直放置3个文本输入，然后在表单的右上方放置textarea。那么输入和文本区域是并排的吗？

这有意义吗？

Answer 1

您需要对标记进行一些调整，为左右列添加两个div会使事情变得更容易：

<form>
    <div class="left-column">
        <label for="name">Name: </label>
        <input id="name" name="name" type="text"/>

        <label for="email">Email: </label>
        <input id="email" name="email" type="text"/>

        <label for="company">Company: </label>
        <input id="company" name="company" type="text"/>
    </div>
    <div class="right-column">
        <label for="ta">Enquiry Details: </label>
        <textarea id="ta" name="ta"></textarea>
    </div>
</form>

然后使用一些简单的CSS，您可以创建两个列效果：

form {
    position: relative;
}

form div.left-column {
    position: absolute;
    width: 50%;
    left: 0;
}

form div.right-column {
    position: absolute;
    width: 50%;
    right: 0;
}

然后在输入上使用正确的CSS样式，以允许它们垂直显示而不在标记中使用<br />标记：

form input, form label {
    float: left;
    clear: left;
}

简单的CSS表单布局

1 个答案: