Question

以下是我的代码的功能代码段，其中包含该问题。我正在将无线电输入转换成药丸/按钮。

我很难过为什么单选按钮高度的容器没有增长以覆盖其子女的填充物？

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

display: inline-block;

使用display: inline;代替#contact .radio-btn + label

#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>

Answer 2

您必须将以下值从inline更改为inline-block：

#contact .radio-btn + label {
  /* display: inline; */
  display: inline-block;
}

在此Question

上提及@Oldskool答案

内联元素：   尊重左派正确的边距和填充，但不是顶部和顶部底

内联块元素：   尊重顶级＆amp;底部边距和填充

#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>

父母身高不包括儿童的填充物

2 个答案: