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

我已阅读多篇文章，我按照说明操作，仍然没有任何变化。我后面的是删除hr标签和我的表单之间的空间。我想通过设置margin和padding到0会做修正，而不是我得到这个：CSS-删除hr标签空间不起作用

而是我想下面类似的图像 - 只是在分离领域的线。

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行的更好的方法。

来源

2016-03-28 jerneva

可以请你分享的jsfiddle在这里我们可以调试的实际问题 – satya

我已检查您的代码 https://jsfiddle.net/95tcdeuu/ 一切正常，也许你有一些以外的CSS，影响hr margin或填充，你可以使用浏览器检查元素来找到它在哪里 –

哪个浏览器你正在用吗？ –

它确实依赖于浏览器的内置样式。检查小提琴：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重要的是你的CSS小时重写浏览器的风格，让我知道，如果它的工作原理！

来源

2016-03-28 06:43:01 Aricha

感谢你，引导CSS我包括是造成这个问题，但！重要的标签似乎解决它。非常感谢你 – jerneva

尝试添加一个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; 
}

来源

2016-03-28 06:13:43 SnakeFoot

或表格....在这种情况下，.box类应该也可以用于 – SnakeFoot

如今hr标签很少使用，如果您需要语义标记，您可以使用css-property 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>

li { 
    width: 400px; 
    border-bottom: 1px dotted #58585b; 
}

我用你的代码，去除所有多余的标签（在我看来），并与您的代码创建JSFiddle-example

来源

2016-03-28 08:32:13

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

回答

相关问题