Question

这似乎很简单，但对于我的生活，我似乎无法解决这个问题。我有两个div并排，每个div包含一个组件，一个是文本字段，一个是组合框。每个都有一个标签，如图所示：

我希望组合框与文本字段的高度相同，但似乎我添加到它的任何高度都会添加到底部，而不是顶部。因此，组合框本身总是有点撞击，导致它不与文本字段对齐。我已经尝试过每一个我能想到的css技巧来减少标签＆动态部署＆＃39;之间的填充。以及它下面的组合框，但是我不能让它符合“名字”的行为。标签和文本输入在它下面。即使这种方法永远不会奏效，也不例外，所以我可以继续前进。我也没有反对完全摆脱标签并用不同类型的选择元素替换它，如果存在一个好的选择元素。有没有人有任何想法？

页面的HTML如下所示：

<div class="main-block">
    <div class="form-group-sm">
        <label class="rf-form-label-top" for="environment_version"><font
        size="2"><b>Name</b></font></label> <input type="text" type="submit"
        class="form-control-sm" id="testengine_name" name="testengine_name"
        ng-model="TestEngineResourceFileParams.name"
        style='width: 300px; height: 25px' />
    </div>
</div>
<div class="main-block">
    <div class="form-group-sm">
        <label class="rf-combo-label" for="dynamicdeployed"> <font
        size="2"><b>Dynamically Deployed</b></font></label>
        <div style="clear: both; height: 0px"></div>
        <select class="rf-engine-combo-group-form" name="dynamicallydeployed"
        id="dynamicallydeployed"
        ng-model="TestEngineResourceFileParams.dynamic_deploypment">
            <option selected value="true">true</option>
            <option value="false">false</option>
        </select><br>
    </div>
</div>

CSS看起来像这样：

.rf-form-label-top {
    margin-left: 15px;
    margin-top: 4px;
    margin-bottom: 2px;
    font-size: 12px;
}

.rf-engine-combo-group-form {
    width: 200px;
    margin-left: 15px;
    border: 1px solid #000;
    font-size: 12px;
    outline:0px;
}

.rf-combo-label {
    margin-left: 15px;
    margin-top: 0px;
    margin-bottom:0px;
    padding-bottom:0px;
    padding: 0;
    font-size: 12px;
}
.rf-form-control-sm {
    display: block;
    width: 200px;
    height: 18px;
    padding: 1px 3px;
    margin-left: 15px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #000;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow
        ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out
        .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    position:relative;
}

Answer 1

这是一个稍微重新设计的标记/样式，以实现您所追求的结果 - 请参阅下面的代码和代码中的注释：

/* Below are 3 additions to your styles */
* { box-sizing: border-box; } /* Ensure the size of elements is correct */
.wrapper { display: flex; } /* Place your two blocks next to each other with flexbox */
label { display: block; } /* Opinionated; This is dispensable */ 

/* Original styles below; changed are commented */
.rf-form-label-top { /* Unused in the markup, removed for clarity */ }

.rf-engine-combo-group-form { /* Unused in the markup, removed for clarity */ }

.rf-combo-label {
    margin-left: 15px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    padding: 0;
    font-size: 12px;
    font-weight: bold; /* Better than using HTML <b> */
}
.rf-form-control-sm {
    display: block;
    width: 200px;
    height: 25px;
    padding: 1px 3px;
    margin-left: 15px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #000;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow
        ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out
        .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    position: relative;
}

<div class="wrapper"> <!-- Added around your markup to set your elements in a flex context -->
	<div class="main-block">
			<div class="rf-form-group-sm">
					<label class="rf-combo-label" for="testengine_name">Name</label>
					<input type="text"
					class="rf-form-control-sm" id="testengine_name" name="testengine_name"
					ng-model="TestEngineResourceFileParams.name" />
			</div>
	</div>
	<div class="main-block">
			<div class="rf-form-group-sm">
					<label class="rf-combo-label" for="dynamicallydeployed">Dynamically Deployed</label>
					<select class="rf-form-control-sm" name="dynamicallydeployed"
					id="dynamicallydeployed"
					ng-model="TestEngineResourceFileParams.dynamic_deploypment">
							<option selected value="true">true</option>
							<option value="false">false</option>
					</select>
			</div>
	</div>
</div>

我已经冒昧地通过删除已弃用的<font>和<b>标记来改进标记，直接在CSS中设置<label>样式。一些类没有意义，所以我用标记中的“正确”替换它们（在我看来），并删除了样式中的类（参见CSS中的注释）。此外，有些事情并不好：您的文字<input>同时包含type="text"和type="submit"。此外，标签'for属性指向不存在的id - 这也已修复。

此代码提供了结果，但由于这是您的项目，我无法确保它完全适合，因此您可能需要进行调整。

试图删除标签和组合框之间的填充

1 个答案: