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標籤空間不起作用

回答

相關問題