CSS-删除hr标记空间不起作用

Question

我已阅读多篇帖子,我已按照说明操作,但仍然没有变化.我想要的是删除hr标签和我的表单之间的空格.我想通过设置margin和padding到0会做了修正,而不是我得到这个:

但我想要的东西就像下面的图像 - 只是用一条线来分隔字段.

HTML

<label for="Fridss" class="label"> F </label>
<button type="button" id="add" name="add" class="btn btn-default addButton" onClick="addInput('dynamicInput');">
  <span class="glyphicon glyphicon-plus"></span>
</button>
<input type="text" name="Fridss" id="Fri" class="open_hours" placeholder="--:--" required tabindex="16">
<span>-</span>
<input type="text" name="Fridss" id="Friday" class="open_hours" placeholder="--:--" required tabindex="17">
<hr />

CSS

hr {
  padding: 0;
  margin: 0;
  width: 400px;
  border-top: 1px dotted #58585b;
}
.open_hours {
  padding: 0;
  margin: 0;
  border-radius: 5px;
  width: 20%;
  height: 25px;
}

或者有更好的方法在CSS中创建行.

Answer 1

它确实取决于浏览器的内置样式.检查小提琴:https://jsfiddle.net/abstractecho/7a3gzpqL/

body{color: black;}
hr {
  padding: 0 !important;
  margin: 0 !important;
  width: 400px;
  border-top: 1px dotted #58585b;
}
.open_hours {
  padding: 0;
  margin: 0;
  border-radius: 5px;
  width: 20%;
  height: 25px;
}

您可能想要检查是否添加了一个保证金:0!对您的hr css很重要,以覆盖浏览器样式并让我知道它是否有效.