如何将输入字段放入 2 列？

Question

我有一个表格，目前全部在一列中，我希望将其分成两列。

我已经尝试添加 div 类，但表单仍然只有一列，我不想对当前表单本身进行任何更改。 我只是希望能够将其分成 2 列。

我也不希望我在字段上更改当前的 CSS 效果..

 $yellow:#f5ba1a; $black:#000000; $grey:#cccccc; .form-style-1{ font-family: Verdana, Geneva, sans-serif; font-size: 0.em; width: 40em; padding: 1em; border: 1px solid #cbc9c9; overflow:auto; resize:both; } .form-style-1 fieldset{ border-radius:none; background-color:#ebebeb; padding:5px; border:1px solid #cbc9c9; width:450px; margin:auto; box-shadow: 1px 2px 5px rgba(0,0,0,.31); -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31); -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31); } .form__field { display: block; } [class*="--checkbox"] { display: inline-block; } [data-conditional] { display: none; } #flight:checked ~ [data-conditional*="flight"] { display: block; } #hotel:checked ~ [data-conditional*="hotel"] { display: block; } #transfer:checked ~ [data-conditional*="travel"] { display: block; } input[type="text"] { display:block; width: 50%; padding: 8px 10px 9px 35px; height: 25px; box-sizing: border-box; outline: none; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; transition: all 0.30s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09); -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09); box-shadow: 1px 2px 5px rgba(0,0,0,.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } input[type="date"] { display:block; width: 50%; padding: 8px 10px 9px 35px; height: 25px; box-sizing: border-box; outline: none; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; transition: all 0.30s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09); -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09); box-shadow: 1px 2px 5px rgba(0,0,0,.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } textarea { display:block; width: 50%; padding: 8px 10px 9px 35px; height: 25px; box-sizing: border-box; outline: none; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; transition: all 0.30s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09); -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09); box-shadow: 1px 2px 5px rgba(0,0,0,.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } select { display:block; width: 50%; padding: 8px 10px 9px 35px; height: 35px; box-sizing: border-box; outline: none; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; transition: all 0.30s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09); -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09); box-shadow: 1px 2px 5px rgba(0,0,0,.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } input[type="time"] { display:block; width: 50%; padding: 8px 10px 9px 35px; height: 25px; box-sizing: border-box; outline: none; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; transition: all 0.30s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09); -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09); box-shadow: 1px 2px 5px rgba(0,0,0,.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } h1 { font-size: 32px; font-weight: 300; color: #4c4c4c; text-align: center; padding-top: 10px; margin-bottom: 10px; } a.button { font-size: 14px; font-weight: 600; color: white; padding: 6px 25px 0px 20px; margin: 10px 8px 20px 0px; display: inline-block; float: right; text-decoration: none; width: 50px; height: 27px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #3a57af; -webkit-box-shadow: 0 3px rgba(58,87,175,.75); -moz-box-shadow: 0 3px rgba(58,87,175,.75); box-shadow: 0 3px rgba(58,87,175,.75); transition: all 0.1s linear 0s; top: 0px; position: relative; } a.button:hover { top: 3px; background-color:#2e458b; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } p { color:black; }

 <div class="form-style-1"> <h1>Travel Registration Form</h1> <form action="" method="POST"> <input name="orgid" type="hidden" value="00D8E000000DW9t" /> <input name="retURL" type="hidden" value="http://" /> <fieldset> <h3> Select Travel</h3> <input class="form__input form__input--checkbox" data-input="00N8E000002AjRq" id="flight" type="checkbox" /> <label class="form__field form__field--checkbox" for="flight"> <span class="form__label">Flight</span> </label> <input class="form__input form__input--checkbox" id="hotel" type="checkbox" /> <label class="form__field form__field--checkbox" for="hotel"> <span class="form__label">Hotel</span> </label> <input class="form__input form__input--checkbox" id="transfer" type="checkbox" /> <label class="form__field form__field--checkbox" for="transfer"> <span class="form__label">Transfer </span> </label> <!--Above is the checkboxes code --> <p class="form__field form__field--text" data-conditional="flight hotel travel"> <span class="form__input">Traveler's Information </span></p> <label class="form__field form__field--text" data-conditional="flight hotel travel" for="name"><span class="form__label">Traveler Name </span><input class="form__input" id="name" maxlength="80" name="name" size="20" type="text" /> </label><br> <label class="form__field form__field--text" data-conditional="flight hotel travel" for="email">Email<input class="form__input" id="email" maxlength="80" name="email" size="20" type="text" /></label><br /> <label class="form__field form__field--text" data-conditional="flight hotel travel" for="phone">Phone<input class="form__input" id="phone" maxlength="40" name="phone" size="20" type="text" /></label><br /> <label class="form__field form__field--text" data-conditional="flight hotel travel" for="subject">Subject<input class="form__input" id="subject" maxlength="80" name="subject" size="20" type="text" /></label><br /> <label class="form__field form__field--text" data-conditional="flight hotel travel" for="description">Description<textarea class="form__input" name="description"></textarea></label><br />

Answer 1

如果我理解正确，那么尝试将您的标签和输入字段包装在 div 中，然后将它们设置为内联块？

HTML：

   <div class="form-input">
        <label class="form__field form__field--text" data-conditional="flight hotel travel" for="name">
            <span class="form__label">Traveler Name</span>
            <input class="form__input" id="name" maxlength="80" name="name" size="20" type="text" /> 
        </label>
    </div>

CSS：

.form-input {
   display: inline-block;
}

Answer 2

使用 CSS 网格来获取两列。

 $yellow: #f5ba1a; $black: #000000; $grey: #cccccc; .form-style-1 { font-family: Verdana, Geneva, sans-serif; font-size: 0em; width: 40em; padding: 1em; border: 1px solid #cbc9c9; overflow: auto; resize: both; } .form-style-1 fieldset { border-radius: none; background-color: #ebebeb; padding: 5px; border: 1px solid #cbc9c9; width: 450px; margin: auto; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.31); -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.31); -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.31); } .form__field { display: block; } [class*="--checkbox"] { display: inline-block; } [data-conditional] { display: none; } #flight:checked ~ [data-conditional*="flight"] { display: grid; grid-template-columns: auto auto; } #hotel:checked ~ [data-conditional*="hotel"] { display: grid; grid-template-columns: auto auto; } #transfer:checked ~ [data-conditional*="travel"] { display: grid; grid-template-columns: auto auto; } input[type="text"] { display: block; width: 50%; padding: 8px 10px 9px 35px; height: 25px; box-sizing: border-box; outline: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } input[type="date"] { display: block; width: 50%; padding: 8px 10px 9px 35px; height: 25px; box-sizing: border-box; outline: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } textarea { display: block; width: 50%; padding: 8px 10px 9px 35px; height: 25px; box-sizing: border-box; outline: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } select { display: block; width: 50%; padding: 8px 10px 9px 35px; height: 35px; box-sizing: border-box; outline: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } input[type="time"] { display: block; width: 50%; padding: 8px 10px 9px 35px; height: 25px; box-sizing: border-box; outline: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } h1 { font-size: 32px; font-weight: 300; color: #4c4c4c; text-align: center; padding-top: 10px; margin-bottom: 10px; } a.button { font-size: 14px; font-weight: 600; color: white; padding: 6px 25px 0px 20px; margin: 10px 8px 20px 0px; display: inline-block; float: right; text-decoration: none; width: 50px; height: 27px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #3a57af; -webkit-box-shadow: 0 3px rgba(58, 87, 175, 0.75); -moz-box-shadow: 0 3px rgba(58, 87, 175, 0.75); box-shadow: 0 3px rgba(58, 87, 175, 0.75); transition: all 0.1s linear 0s; top: 0px; position: relative; } a.button:hover { top: 3px; background-color: #2e458b; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } p { color: black; }

 <body> <div class="form-style-1"> <h1>Travel Registration Form</h1> <form action="" method="POST"> <input name="orgid" type="hidden" value="00D8E000000DW9t" /> <input name="retURL" type="hidden" value="http://" /> <fieldset> <h3> Select Travel </h3> <input class="form__input form__input--checkbox" data-input="00N8E000002AjRq" id="flight" type="checkbox" /> <label class="form__field form__field--checkbox" for="flight"> <span class="form__label">Flight</span> </label> <input class="form__input form__input--checkbox" id="hotel" type="checkbox" /> <label class="form__field form__field--checkbox" for="hotel"> <span class="form__label">Hotel</span> </label> <input class="form__input form__input--checkbox" id="transfer" type="checkbox" /> <label class="form__field form__field--checkbox" for="transfer"> <span class="form__label">Transfer </span> </label> <!--Above is the checkboxes code --> <p class="form__field form__field--text" data-conditional="flight hotel travel" > <span class="form__input">Traveler's Information </span> </p> <div data-conditional="flight hotel travel"> <label class="form__field--text" for="name" ><span class="form__label">Traveler Name </span ><input class="form__input" id="name" maxlength="80" name="name" size="20" type="text" /> </label> <label class="form__field--text" for="email" >Email<input class="form__input" id="email" maxlength="80" name="email" size="20" type="text" /></label> <label class="form__field--text" for="phone" >Phone<input class="form__input" id="phone" maxlength="40" name="phone" size="20" type="text" /></label> <label class="form__field--text" for="subject" >Subject<input class="form__input" id="subject" maxlength="80" name="subject" size="20" type="text" /></label> <label class="form__field--text" for="description" >Description<textarea class="form__input" name="description" ></textarea ></label> </div> </fieldset> </form> </div> </body>

您现在可以减少输入的宽度或增加form-style-1的宽度以实现更优雅的设计。