子供のパッドが覆われていない親の高さ

以下は、この問題を含むコードの機能的なスニペットです。私は、ラジオ入力をピル/ボタンに変えています。子供のパッドが覆われていない親の高さ

ラジオボタンの高さのコンテナが子どもの詰め物を覆うように成長していないのはなぜですか？

#contact label { 
 
    cursor: pointer; 
 
} 
 

 
#contact label, 
 
#contact input { 
 
    display: block; 
 
} 
 

 
#contact input[type=radio].radio-btn { 
 
    display: none; 
 
} 
 
#contact .radio-btn + label { 
 
    display: inline; 
 
    padding: 9px; 
 
    border: 1px solid #ccc; 
 
    margin: 0; 
 
    user-select: none; 
 
    box-sizing: border-box; 
 
} 
 
#contact .radio-btn:checked + label { 
 
    transition: ease-out .25s; 
 
    background-color: #e6e6e6; 
 
    border-color: #adadad; 
 
} 
 

 
#contact .radio-btn-group { 
 
    margin: auto; 
 
} 
 
#contact .radio-btn-group input.radio-btn:first-of-type + label { 
 
    border-top-left-radius: 0.3rem; 
 
    border-bottom-left-radius: 0.3rem; 
 
} 
 
#contact .radio-btn-group input.radio-btn:last-of-type + label { 
 
    border-top-right-radius: 0.3rem; 
 
    border-bottom-right-radius: 0.3rem; 
 
} 
 
#contact .radio-btn-group input.radio-btn:not(:first-of-type) + label { 
 
    margin-left: -1px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 
<form id="contact"> 
 
        <div class="form-group row"> 
 
         <div class="radio-btn-group col-lg-12 col-md-12 col-sm-12"> 
 
         <input id="general" class="radio-btn" type="radio" name="reason" value="general" checked><label for="general">General Enquiry</label><input id="quote" class="radio-btn" type="radio" name="reason" value="quote"><label for="quote">Quote</label><input id="rand" class="radio-btn" type="radio" name="reason" value="rand"><label for="rand">Rand</label> 
 
         </div> 
 
        </div> 
 
        </form>

出典

2017-11-26 Oliver Giess

ためdisplay: inline;の使用display: inline-block;：

この Question

インライン要素に@Oldskool回答を参照
#contact .radio-btn + label { 
    /* display: inline; */ 
    display: inline-block; 
} 
：に関しては&右マージンおよびパディングを残したが、&底

インラインブロック要素トップない ： respect top &下の余白とpa魅力を働いたという恐ろしい

#contact label { 
 
    cursor: pointer; 
 
} 
 

 
#contact label, 
 
#contact input { 
 
    display: block; 
 
} 
 

 
#contact input[type=radio].radio-btn { 
 
    display: none; 
 
} 
 
#contact .radio-btn + label { 
 
    display: inline-block; 
 
    padding: 9px; 
 
    border: 1px solid #ccc; 
 
    margin: 0; 
 
    user-select: none; 
 
    box-sizing: border-box; 
 
} 
 
#contact .radio-btn:checked + label { 
 
    transition: ease-out .25s; 
 
    background-color: #e6e6e6; 
 
    border-color: #adadad; 
 
} 
 

 
#contact .radio-btn-group { 
 
    margin: auto; 
 
} 
 
#contact .radio-btn-group input.radio-btn:first-of-type + label { 
 
    border-top-left-radius: 0.3rem; 
 
    border-bottom-left-radius: 0.3rem; 
 
} 
 
#contact .radio-btn-group input.radio-btn:last-of-type + label { 
 
    border-top-right-radius: 0.3rem; 
 
    border-bottom-right-radius: 0.3rem; 
 
} 
 
#contact .radio-btn-group input.radio-btn:not(:first-of-type) + label { 
 
    margin-left: -1px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 
<form id="contact"> 
 
        <div class="form-group row"> 
 
         <div class="radio-btn-group col-lg-12 col-md-12 col-sm-12"> 
 
         <input id="general" class="radio-btn" type="radio" name="reason" value="general" checked><label for="general">General Enquiry</label><input id="quote" class="radio-btn" type="radio" name="reason" value="quote"><label for="quote">Quote</label><input id="rand" class="radio-btn" type="radio" name="reason" value="rand"><label for="rand">Rand</label> 
 
         </div> 
 
        </div> 
 
        </form>

出典

2017-11-26 05:42:18

代わり#contact .radio-btn + labelあなたはinline-blockへinlineから以下の値を変更する必要が

#contact label { 
 
    cursor: pointer; 
 
} 
 

 
#contact label, 
 
#contact input { 
 
    display: block; 
 
} 
 

 
#contact input[type=radio].radio-btn { 
 
    display: none; 
 
} 
 
#contact .radio-btn + label { 
 
    display: inline-block; 
 
    padding: 9px; 
 
    border: 1px solid #ccc; 
 
    margin: 0; 
 
    user-select: none; 
 
    box-sizing: border-box; 
 
} 
 
#contact .radio-btn:checked + label { 
 
    transition: ease-out .25s; 
 
    background-color: #e6e6e6; 
 
    border-color: #adadad; 
 
} 
 

 
#contact .radio-btn-group { 
 
    margin: auto; 
 
    background-color: gold; 
 
} 
 
#contact .radio-btn-group input.radio-btn:first-of-type + label { 
 
    border-top-left-radius: 0.3rem; 
 
    border-bottom-left-radius: 0.3rem; 
 
} 
 
#contact .radio-btn-group input.radio-btn:last-of-type + label { 
 
    border-top-right-radius: 0.3rem; 
 
    border-bottom-right-radius: 0.3rem; 
 
} 
 
#contact .radio-btn-group input.radio-btn:not(:first-of-type) + label { 
 
    margin-left: -1px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 
<form id="contact"> 
 
        <div class="form-group row"> 
 
         <div class="radio-btn-group col-lg-12 col-md-12 col-sm-12"> 
 
         <input id="general" class="radio-btn" type="radio" name="reason" value="general" checked><label for="general">General Enquiry</label><input id="quote" class="radio-btn" type="radio" name="reason" value="quote"><label for="quote">Quote</label><input id="rand" class="radio-btn" type="radio" name="reason" value="rand"><label for="rand">Rand</label> 
 
         </div> 
 
        </div> 
 
        </form>

出典

2017-11-26 05:30:18 DigitCart

をdding、あなたはこれがそうである理由を説明する気でしょうか？ –

子供のパッドが覆われていない親の高さ

答えて

関連する問題