html - 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

它确实取决于浏览器的内置样式。检查 fiddle :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 很重要，以覆盖浏览器样式并让我知道它是否有效。