Question

在this Codepen中，我使用的是datetime输入类型。尝试对其进行样式设置，使其与它的左侧和右侧的输入字段具有相同的高度并处于同一水平。我尝试了行高和行高，但这些似乎不起作用。为datetime类型的输入字段的高度设置样式的正确方法是什么？谢谢。

<div class="container">
                            <div class="row">

                            <div class="form-group col-4">
                                <label>Name </label>
                                <div>
                                  <input type="text" class="form-control input-lg">
                                </div>
                            </div>
                            
                            <div class="form-group col-4">
                                <label>Date Time</label>
                                <div>
                                  <input type="datetime-local" id="datetime" name="datetime">
                                </div>
                            </div>
                            <div class="form-group col-4">
                                <label>Test</label>
                                <div>
                                    <input type="text" class="form-control input-lg" style="padding: 1em;">
                                </div>
                            </div>
                          </div>
</div>

Answer 1

将输入设置为40px高度；看看外观

Answer 2

行高有效，它将向上和向下推动输入框的边缘

像这样添加它：

#datetime {
/*   height: 1rem; */
 line-height:33px;
}

或添加填充（好吧，我认为这是正确的方法）：

#datetime {
  padding: 4px; /* more or less */
}

并在codepen上查看：https://codepen.io/ppwater/pen/rNLLzqX

Answer 3

#datetime {
  height: 38px;
}

也使用引导网格系统。

如何设置日期时间输入字段的样式

3 个答案: