标签宽度为100％？

Question

我正在尝试在CSS中做标签，但我被卡住了。我的标签运行良好，但我希望菜单100％宽。在那里，它停在“Tab4”之后，我该怎么做？

我目前正在学习HTML和CSS，很抱歉，如果这是一个愚蠢的问题：o

下面是我的代码

body {
  background-color: #161719;
  color: #fff;
}

div.tab-frame>input {
  display: none;
}

div.tab-frame>label {
  background-color: rgba(1, 1, 1, 0.30);
  display: block;
  float: left;
  font-size: 30px;
  padding: 0 20px 7px 20px;
  cursor: pointer;
  margin-bottom: 0;
  color: rgba(255, 255, 255, .5);
  font-weight: 400;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: 0.3s;
}

div.tab-frame>label:hover {
  color: rgba(255, 255, 255, .9);
}

div.tab-frame input:checked+label {
  /* background:rgba(255,255,255,.03);   */
  color: #ff4052;
  cursor: default;
}

div.tab-frame div.tab {
  display: none;
  padding-top: 10px;
  clear: left;
}

div.tab-frame input:nth-of-type(1):checked~.tab:nth-of-type(1),
div.tab-frame input:nth-of-type(2):checked~.tab:nth-of-type(2),
div.tab-frame input:nth-of-type(3):checked~.tab:nth-of-type(3),
div.tab-frame input:nth-of-type(4):checked~.tab:nth-of-type(4) {
  display: block;
}

div.tab-frame>label:nth-of-type(1) {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

div.tab-frame>label:nth-of-type(4) {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

<div class="tab-frame">
  <input type="radio" checked name="tab" id="tab1">
  <label for="tab1">Tab 1</label>
  <input type="radio" name="tab" id="tab2">
  <label for="tab2">Tab 2</label>
  <input type="radio" name="tab" id="tab3">
  <label for="tab3">Tab 3</label>
  <input type="radio" name="tab" id="tab4">
  <label for="tab4">Tab 4</label>

  <div class="tab">content 1</div>
  <div class="tab">content 2</div>
  <div class="tab">content 3</div>
  <div class="tab">content 4</div>
</div>

Answer 1

更改css

的div.tab-frame>label

div.tab-frame>label {
    background-color: rgba(1, 1, 1, 0.30);
    /* display: block; */
    /* float: left; */
    font-size: 30px;
    padding: 0 20px 7px 20px;
    cursor: pointer;
    margin-bottom: 0;
    color: rgba(255, 255, 255, .5);
    font-weight: 400;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    transition: 0.3s;
    display: inline-block; // Added
    width: 24.5%; // Added
    box-sizing: border-box; // Added
}

Answer 2

试一试。希望它的帮助。    

＆＃13;

＆＃13;

    *{
  box-sizing: border-box;
}

body {
  background-color: #161719;
  color: #fff;
}

div.tab-frame>input {
  display: none;
}

div.tab-frame>label {
  background-color: rgba(1, 1, 1, 0.30);
  display: block;
  float: left;
  font-size: 30px;
  padding: 0 20px 7px 20px;
  cursor: pointer;
  margin-bottom: 0;
  color: rgba(255, 255, 255, .5);
  font-weight: 400;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: 0.3s;
  width: 25%;
  text-align:left;
}

div.tab-frame>label:hover {
  color: rgba(255, 255, 255, .9);
}

div.tab-frame input:checked+label {
  /* background:rgba(255,255,255,.03);   */
  color: #ff4052;
  cursor: default;
}

div.tab-frame div.tab {
  display: none;
  padding-top: 10px;
  clear: left;
}

div.tab-frame input:nth-of-type(1):checked~.tab:nth-of-type(1),
div.tab-frame input:nth-of-type(2):checked~.tab:nth-of-type(2),
div.tab-frame input:nth-of-type(3):checked~.tab:nth-of-type(3),
div.tab-frame input:nth-of-type(4):checked~.tab:nth-of-type(4) {
  display: block;
}

div.tab-frame>label:nth-of-type(1) {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

div.tab-frame>label:nth-of-type(4) {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

＆＃13;

    <div class="tab-frame">
      <input type="radio" checked name="tab" id="tab1">
      <label for="tab1">Tab 1</label>
      <input type="radio" name="tab" id="tab2">
      <label for="tab2">Tab 2</label>
      <input type="radio" name="tab" id="tab3">
      <label for="tab3">Tab 3</label>
      <input type="radio" name="tab" id="tab4">
      <label for="tab4">Tab 4</label>

      <div class="tab">content 1</div>
      <div class="tab">content 2</div>
      <div class="tab">content 3</div>
      <div class="tab">content 4</div>
    </div>

＆＃13;

＆＃13;

＆＃13;