html - 父子div之间无法解释的差距

Question

我正在使用无线电输入进行切换。但是我在父母和孩子之间发现了差距。令我困惑的是，如果我们在一个页面中多次使用相同的组件，那么差距并不一致。有时他们有差距，有时他们没有。我将所有内容都保留为边框大小，因为我看到一些答案表明内联块存在问题，所以我只使用了 flex。

输出图像

:root{
  --common-color: #24587D;
}
*{
  box-sizing: border-box;
}
.timeframe {
  display: flex;
  border: 1px solid var(--common-color);
  border-radius: 4px;
  overflow: hidden;
  width: fit-content;
  margin-bottom: 20px;
}

.timeframe-radio {
  margin-left: -1px;
  height: 40px;
  display: flex;
}

.timeframe-radio-input {
  appearance: none;
}

.timeframe-radio-input:checked + label {
  background-color: var(--common-color);
  color: #fff;
}

.timeframe-radio-label {
  cursor: pointer;
  line-height: 28px;
  font-size: 14px;
  height: 40px;
  margin: 0;
  padding: 8px 16px;
  transition: background-color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

<div class="timeframe">
  <div class="timeframe-radio">
    <input class="timeframe-radio-input" id="sub-radio-1" checked type="radio" name="subscriberTimeframeToggle">
    <label for="sub-radio-1" class="timeframe-radio-label">
      Monthly
    </label>
  </div>
  <div class="timeframe-radio">
    <input class="timeframe-radio-input" id="sub-radio-2" type="radio" value="daily" name="subscriberTimeframeToggle">
    <label for="sub-radio-2" class="timeframe-radio-label">
       Daily
    </label>
  </div>
</div>

<div class="timeframe">
  <div class="timeframe-radio">
    <input class="timeframe-radio-input" id="unsub-radio-1" checked type="radio" name="unsubscriberTimeframeToggle">
    <label for="unsub-radio-1" class="timeframe-radio-label">
      Monthly
    </label>
  </div>
  <div class="timeframe-radio">
    <input class="timeframe-radio-input" id="unsub-radio-2" type="radio" value="daily" name="unsubscriberTimeframeToggle">
    <label for="unsub-radio-2" class="timeframe-radio-label">
       Daily
    </label>
  </div>
</div>

<div class="timeframe">
  <div class="timeframe-radio">
    <input class="timeframe-radio-input" id="net-sub-radio-1" checked type="radio" name="netSubscriberTimeframeToggle">
    <label for="net-sub-radio-1" class="timeframe-radio-label">
      Monthly
    </label>
  </div>
  <div class="timeframe-radio">
    <input class="timeframe-radio-input" id="net-sub-radio-2" type="radio" value="daily" name="netSubscriberTimeframeToggle">
    <label for="net-sub-radio-2" class="timeframe-radio-label">
       Daily
    </label>
  </div>
</div>

这是代码的链接。 https://jsfiddle.net/mraza007/awxshm7n/10/

标签： htmlcss

Answer 1

有时表单输入会产生标签问题，特别是当我们overflow: hidden在父级中使用时。

第 1 步：overflow: hidden;从父 CSS 中删除。

.timeframe {
   display: flex;
   border: 1px solid var(--common-color);
   border-radius: 4px;
   width: fit-content;
   margin-bottom: 20px;
}

第2步：删除margin-left: -1px;并添加align-items: center;下面的css。

.timeframe-radio {
   align-items: center;
   height: 40px;
   display: flex;
}

第3步：删除appearance: none;并添加display: none;下面的css。

.timeframe-radio-input {
   display: none;
}

第 4 步：在下面的 css 中删除line-height: 28px;、height: 40px;和margin: 0;更新。padding: 12px 17px 12px 16px;

.timeframe-radio-label {
   cursor: pointer;
   font-size: 14px;
   padding: 12px 17px 12px 16px;
   transition: background-color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

我还更新了以下代码片段中的所有更改。我希望它会帮助你。

:root{
  --common-color: #24587D;
}
*{
  box-sizing: border-box;
}
.timeframe {
  display: flex;
  border: 1px solid var(--common-color);
  border-radius: 4px;
  width: fit-content;
  margin-bottom: 20px;
}

.timeframe-radio {
  align-items: center;
  height: 40px;
  display: flex;
}

.timeframe-radio-input {
  display: none;
}

.timeframe-radio-input:checked + label {
  background-color: var(--common-color);
  color: #fff;
}

.timeframe-radio-label {
  cursor: pointer;
  font-size: 14px;
  padding: 12px 17px 12px 16px;
  transition: background-color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

<div class="timeframe">
  <div class="timeframe-radio">
    <input class="timeframe-radio-input" id="sub-radio-1" checked type="radio" name="subscriberTimeframeToggle">
    <label for="sub-radio-1" class="timeframe-radio-label">
      Monthly
    </label>
  </div>
  <div class="timeframe-radio">
    <input class="timeframe-radio-input" id="sub-radio-2" type="radio" value="daily" name="subscriberTimeframeToggle">
    <label for="sub-radio-2" class="timeframe-radio-label">
       Daily
    </label>
  </div>
</div>

<div class="timeframe">
  <div class="timeframe-radio">
    <input class="timeframe-radio-input" id="unsub-radio-1" checked type="radio" name="unsubscriberTimeframeToggle">
    <label for="unsub-radio-1" class="timeframe-radio-label">
      Monthly
    </label>
  </div>
  <div class="timeframe-radio">
    <input class="timeframe-radio-input" id="unsub-radio-2" type="radio" value="daily" name="unsubscriberTimeframeToggle">
    <label for="unsub-radio-2" class="timeframe-radio-label">
       Daily
    </label>
  </div>
</div>

<div class="timeframe">
  <div class="timeframe-radio">
    <input class="timeframe-radio-input" id="net-sub-radio-1" checked type="radio" name="netSubscriberTimeframeToggle">
    <label for="net-sub-radio-1" class="timeframe-radio-label">
      Monthly
    </label>
  </div>
  <div class="timeframe-radio">
    <input class="timeframe-radio-input" id="net-sub-radio-2" type="radio" value="daily" name="netSubscriberTimeframeToggle">
    <label for="net-sub-radio-2" class="timeframe-radio-label">
       Daily
    </label>
  </div>
</div>