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

Question

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

我希望组合框与文本字段的高度相同，但似乎我添加到它的任何高度都会添加到底部，而不是顶部。因此，组合框本身总是会向下一点点，导致它与文本字段不对齐。我已经尝试了所有我能想到的 css 技巧来减少标签“动态部署”与其下方的组合框之间的填充，但我无法让它与“名称”标签的行为和它下方的文本输入相匹配.即使这永远行不通，我也很高兴知道这样我可以继续前进。如果存在好的选择元素，我也不反对完全摆脱标签并用不同类型的选择元素替换它。有人有什么想法吗？

页面的 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

为了实现您所追求的结果，这里对标记/样式进行了略微修改 - 请参阅下面和代码中的我的 cmets：

/* 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>s 的样式。一些类没有意义，所以我用标记中的“正确”类（在我看来）替换了它们，并删除了样式中的类（参见 CSS 中的 cmets）。此外，有些事情并不好：您的文本<input> 同时具有type="text" 和type="submit"。此外，标签的 for 属性指向不存在的 ids - 这也已得到修复。

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