CSS削除hrタグスペースが機能しない

Question

私は複数の投稿を読んでいますが、私は指示に従っており、変更はありません。後は、hrタグと私のフォームの間のスペースを削除することです。

をしかし、その代わりに、私は下の画像のような何かをしたい - フィールドだけを分離することで行と：私の代わりに私はこれを取得しています、修正を行うだろう0からmarginとpaddingを設定することで思いました。

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の行を作成するより良い方法があります。各入力用のdivを追加

Answer 1

それは本当に、ブラウザの組み込みのスタイルに依存しません。フィドルを確認します！0あなたの時間のCSSへの重要なブラウザのスタイルを上書きし、それが動作するかどうか私に知らせる：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; 
} 

あなたはマージンを加えているかどうかを確認することをお勧めします。

Answer 2

試してみてください。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; 
} 

Answer 3

今日はhrタグはほとんど使用されていません。セマンティックマークアップが必要な場合は、CSSプロパティー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を作成し