Question

我找不到将输入框分成列的简单方法。如果我有：

名字
姓氏
电子邮件
电话
消息

我怎样才能这样做，电子邮件在左栏，最后一段，电话在右栏，邮件占据两列？

我尝试过的事情：

<html lang="en">
<head>

    <title>Fixed Header and Nav</title>
    <link href="css/HIT.css" rel="stylesheet">
</head>
<body>
    <div class="header">
    <div class="container">
        <div class="logo">
            <h1><a href="#"></a>Intel</h1>
        </div><!--logo-->

        <div class="nav">
            <ul>
                <li><a href="#">Login</a></li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
                <li><a href="#">Account</a></li>
            </ul>

        </div><!--nav-->

    </div><!--container-->  
    </div><!--header-->

    <div class="container">
    <div class="content">

        <form action="operations/create_hit.php" method="post">
            <label class="box">Name</label>
                <input id="hitName" type="text" ><br>
            <label class="box">Title</label>
                <input id="hitTitle" type="text"><br>
            <label class="box">Description</label>
                <input id="hitDescription" type="text"><br>
            <label class="box">Reward</label>
                <input id="hitReward" type="text" ><br>
            <label class="box">External Question URL</label>
                <input id="hitURL" type="text"><br>
            <label class="box">Assignment Duration</label>
                <input id="hitDuration" type="text"><br>
            <label class="box">Assignment Lifetime</label>
                <input id="hitLifetime" type="text"><br>
            <label class="box">AutoApproval Delay</label>
                <input id="hitApprovalDelay" type="text"><br>
            <label class="box">Max Assignments</label>
                <input id="hitMaxAssignments" type="text"><br>  
        </form>

        <input id="submitButton" type="submit">

    </div>
    </div>
</body>
</html>

Answer 1

＆＃13;

.half {
 width: 50%;
}

input {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
}

＆＃13;

<input class="half" style="float: left;">
<input class="half" style="float: right;">
<input>

＆＃13;

将输入框分成列的最简单方法是什么？

1 个答案: