Question

有人可以帮我解决这个问题吗？我很新，由于某种原因无法想象一些似乎非常简单的东西。我想要做的是在ew_field旁边有gvw_field对齐。我不确定如何将<div>彼此对齐。

#gvw_field {
	text-align:center;
}

<div class="clearfix">

	<div id="ew_field">
		<label for="ew">Empty Weight:</label>
		<input type="text" name="ew" id="ew" value="">
    </div>
    
    <div id="gvw_field">     
		<label for="gvw" >Gross Vehicle Weight:*</label>
		<input type="text" name="gvw" id="gvw" value="">
    </div>
    
    <div id="ft_field">     
		<label for="ft">Feet:</label>
		<input type="text" name="ft" id="ft" value="">
    </div>
    
</div>

Answer 1

Working jsFiddle Demo

display: inline属性可以执行此操作。

#gvw_field, #ew_field{
  display: inline;
}

Readup about display property on MDN.

工作代码段：

＆＃13;

#gvw_field {
	text-align:center;
}

#gvw_field, #ew_field{
  display: inline;
}

＆＃13;

<div class="clearfix">

	<div id="ew_field">
		<label for="ew">Empty Weight:</label>
		<input type="text" name="ew" id="ew" value="">
    </div>
    
    <div id="gvw_field">     
		<label for="gvw" >Gross Vehicle Weight:*</label>
		<input type="text" name="gvw" id="gvw" value="">
    </div>
    
    <div id="ft_field">     
		<label for="ft">Feet:</label>
		<input type="text" name="ft" id="ft" value="">
    </div>
    
</div>

＆＃13;

Answer 2

您需要显示内联显示值和给定宽度。

 #ew_field, #ft_field, #gvw_field  {
    text-align: center;
    display: inline-block;
    width: 150px; /* Adjust as needed */
}

See working demo here

Answer 3

使用浮点数对齐每个<div>

#gvw_field {
	text-align:center;
}

.column{
    width: 33.33%;
    float: left;
}

<div class="clearfix">

	<div class="column" id="ew_field">
		<label for="ew">Empty Weight:</label>
		<input type="text" name="ew" id="ew" value="">
    </div>
    
    <div class="column" id="gvw_field">     
		<label for="gvw" >Gross Vehicle Weight:*</label>
		<input type="text" name="gvw" id="gvw" value="">
    </div>
    
    <div class="column" id="ft_field">     
		<label for="ft">Feet:</label>
		<input type="text" name="ft" id="ft" value="">
    </div>
    
</div>

Answer 4

使用float并且不要在许多项目中使用相同的ID：

CSS：

.ft_field
{
    float: right;
        width: 50%;

}

label {
    display: inline-block;
  width: 170px;
}

.gvw_field {
    float: right;
    width: 50%;
}

HTML：

<div class="clearfix">

    <div class="ew_field">
        <label for="ew">Empty Weight:</label>
        <input type="text" name="ew" id="ew" value=""/>
    </div>

    <div class="gvw_field">     
        <label for="gvw" >Gross Vehicle Weight:*</label>
        <input type="text" name="gvw" id="gvw" value=""/>
    </div>

    <div class="ft_field">     
        <label for="ft">Feet:</label>
        <input type="text" name="ft" id="ft" value=""/>
    </div>

</div>

jsfiddle

Css Align Div旁边另一个Div

4 个答案: