Question

如何使每个输入形式一直向右移动。

我试过把浮动：对，但它弄乱了整个表格。

这就是我现在所拥有的：

HTML：

'status_message'

CSS：

<form action="pdotest/test.php" method="post">

            <div>
                <div style="float: left;">
                    <label>First Name:</label><br/>
                    <input type="text" name="firstname" />
                </div>
                <div>
                    <label>Province:</label><br/>
                    <select name="Province">
                        <option value="volvo">Alberta</option>
                        <option value="saab">British Columbia</option>
                        <option value="mercedes">Manitoba</option>
                        <option value="audi">New Brunswick</option>
                        <option value="audi">Newfoundland and Labrador  </option>
                        <option value="audi">Northwest Territories</option>
                        <option value="audi">Nova Scotia</option>
                        <option value="audi">Ontario</option>
                        <option value="audi">Prince Edward Island</option>
                        <option value="audi">Quebec</option>
                        <option value="audi">Saskatchewan</option>
                        <option value="audi">Yukon</option>
                    </select>
                </div>
            </div>

            <div>
                <div style="float: left;">
                    <label>Last Name:</label><br/>
                    <input type="text" name="lastname" />
                </div>
                <div>
                    <label>Postal Code:</label><br/>
                    <input type="text" name="postalcode" />
                </div>
            </div>

            <div>
                <div style="float: left;">
                    <label>Address Line 1:</label><br/>
                    <input type="text" name="addressline1" />
                </div>
                <div>
                    <label>Phone Number (day):</label><br/>
                    <input type="text" name="phonenumber" />
                </div>
            </div>

            <div>
                <div style="float: left;">
                    <label>Address Line 2:</label><br/>
                    <input type="text" name="addressline2" />
                </div>
                <div>
                    <label>Postal Code:</label><br/>
                    <input type="text" name="postalcode" />
                </div>
            </div>
        </form>

https://jsfiddle.net/y13ac506/1/

我真的不想使用保证金/填充。

Answer 1

使用两个不同的div与float:left＆amp; width:50%风格。两者将并排排列。然后根据您的要求输入输入

＆＃13;

.container{
  width:50%;
  margin:0;
  padding:0;
  float:left;
}

＆＃13;

<div class="container">
  <div>
    <label>First Name:</label><br>
	<input type="text" name="firstname"/>
  </div><br>
  <div>
    <label>Last Name:</label><br>
	<input type="text" name="lastname"/>
  </div>
</div>
<div class="container">
  <div>
    <label>Province:</label><br>
	<select name="Province">
	    <option value="volvo">Alberta</option>
		<option value="saab">British Columbia</option>
		<option value="mercedes">Manitoba</option>
		<option value="audi">New Brunswick</option>
		<option value="audi">Newfoundland and Labrador	</option>
		<option value="audi">Northwest Territories</option>
		<option value="audi">Nova Scotia</option>
		<option value="audi">Ontario</option>
		<option value="audi">Prince Edward Island</option>
		<option value="audi">Quebec</option>
		<option value="audi">Saskatchewan</option>
		<option value="audi">Yukon</option>
	</select> 
  </div><br>
  <div>
    <label>Postal Code:</label><br>
	<input type="text" name="postalcode"/>
  </div>
</div>

＆＃13;

Answer 2

使用float：right然后在最后添加流动代码：

    <div style="clear:both;"></div>
 </form>

注意：根据您的代码，这是最简单的方法。

Answer 3

尝试减小宽度值

 input[type=text], select {
  width: 250px; 
 }

/* manage it with margin for appropriate spacing around input fields..

使表单输入浮动到右边？

3 个答案: