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很重要，以覆盖浏览器样式并让我知道它是否有效。

Answer 2

现在很少使用<properties> <driver-version>5.1.38</driver-version> <jackson-core-version>2.7.0</jackson-core-version> </properties> <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.1</version> <configuration> <source>1.7</source> <target>1.7</target> </configuration> </plugin> </plugins> <resources> <resource> <directory>src/main/resources</directory> <filtering>true</filtering> </resource> </resources> </build> <dependencies> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>${driver-version}</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>${jackson-core-version}</version> </dependency> </dependencies> <profiles> <profile> <id>...</id> <properties>...</properties> 标记，如果需要语义标记，可以使用css-property hr。在您的情况下，您有包含类似元素的经典列表，因此使用border标记的语义方式并包含ul标记中的每一行。

li

<li>
  <label for="Fridss" class="label"> M </label>
  <button type="button" id="add" name="add" class="fa fa-plus-square-o addButton" onClick="addInput('dynamicInput');">
  </button>
  <input type="text" name="Fridss" id="Fri" class="open_hours" placeholder="--:--" required tabindex="16"> -
  <input type="text" name="Fridss" id="Friday" class="open_hours" placeholder="--:--" required tabindex="17">
</li>

我使用了您的代码，删除了所有额外的代码（在我看来）并使用您的代码创建了JSFiddle-example

Answer 3

尝试为每个输入添加div：https://jsfiddle.net/7nww2tmw/

<div class="box">
  <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">
</div>

的CSS：

.open_hours {
  padding: 0;
  margin: 0;
  border-radius: 5px;
  width: 20%;
  height: 25px;
}
.box {
  width: 300px;
  height: 29px;
  border: dotted 1px #f00;
  float: left;
  border-left: #ff0000;
  border-right: #ff0000;
  border-top: #ff0000;
}