Question

我试图找出如何在我的表单中获取标签以便全部保持在一条线上。也就是说，如果特定输入的标签恰好比其他标签更长，我希望其他标签下面有额外的空白区域，以便我的输入字段对齐。有关对齐问题，请参见图片。

    <div class="row">
        <div class="form-group col-xs-12 col-sm-3 col-md-3 col-lg-3">
            <label>Window Utilization Total:<span class="input-required" ng-show="logbook.util.$error.required">*</span></label>
            <input name="util" ng-model="sortie.total_window_time" empty-to-null required type="text" title="Time: e.g. 01:00, 12:30, 23:59, etc" maxlength="5"
                   placeholder="00:00" pattern="^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$"/>
            <p class="input-error" ng-show="logbook.util.$invalid && logbook.util.$touched">
                Invalid time (e.g. 12:00, 23:59, 1:30, etc).
            </p>
        </div>
        <div class="form-group col-xs-12 col-sm-3 col-md-3 col-lg-3">
            <label>Flight Plan:</label>
            <input ng-model="sortie.flight_plans" empty-to-null type="text" placeholder="e.g. NMZSAN_FP509"/>
        </div>
        <div class="form-group col-xs-12 col-sm-3 col-md-3 col-lg-3">
            <label>Partial Flight Plans (Lines Completed):</label>
            <input ng-model="sortie.partial_flight_plan" empty-to-null type="text" placeholder="e.g. NMZSAN_FP509, Lines 1-5"/>
        </div>
        <div class="form-group col-xs-12 col-sm-3 col-md-3 col-lg-3">
            <label>Date of Last Control:</label>
            <input ng-model="sortie.last_control_date" empty-to-null type="text" placeholder="YYYY-MM-DD"/>
        </div>
    </div>

Answer 1

只需在您的文件中添加此js代码即可，它会根据内容/文本的最大标签高度来均衡所有标签高度。

将类 label_big 添加到所有标签元素

这对我很有用，希望它能解决你的问题。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
    $(document).ready(function(){

    var highestBox = 0;
        $('.form_group .label_big').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('.form_group .label_big').height(highestBox);

});
</script>

Answer 2

如果你想采用全css方法，那将会很棘手。有一天，grid layout会使这类事情变得简单，但it has terrible support right now。

但是，您可以使用flex-box来帮助您。

我认为如果你有两行，一行用于标签，一行用于输入。

<style>
  div { display: flex }
  label, input { flex: 1 }
</style>
<div>
  <label for="1">Short</label>
  <label for="2">Also Short</label>
  <label for="3">So long ohmygoodness so much to say</label>
</div>
<div>
  <input id="1"/>
  <input id="2"/>
  <input id="3"/>
</div>

此处a jsfiddle to demonstrate it。

请注意，Flexbox支持尚不完善，您应该添加一些特定于浏览器的前缀并了解其局限性。 Read more at caniuse.com。如果您需要支持旧版本的IE，看起来您将不得不使用javascript后备，如此处的其他答案中所示。

CSS - 在单独的行上发出维护标签和输入的问题

2 个答案: