为什么我的标签在更大、更大、更宽的显示器上移动到垂直方向？

问题描述 投票：0回答：1

之前，我已经承认了与我的类似的现有问题：纯 CSS 手风琴无法在 CSS 选项卡中工作，它可以在任何尺寸的任何显示器上完美运行，但我们之间的区别在于他们使用 

a
而我使用不使用这个元素。在他们的代码中，如果将 
border
属性设置为 
.w3c
，则边框最终位于外部，而不是中央或内部。

纯 CSS 选项卡在中小型显示器上完美工作，但在大型、更大和宽显示器上不起作用。在更大、更大、更宽的显示器上，选项卡最终被移动到垂直侧。

在元素 

.tabs-ids
上，我更改了 CSS 网格 
display
和 
flex-wrap
属性值，它始终是相同的，但仅限于更大、更大、更宽的显示器。我也尝试过测试其他元素 – 
.tabs-label
和 
.tabs-panel
，但没有效果。

您可以测试该片段。记得将响应式设计设置为 2400px:

:root {
  --ids_color_action_neutral_base: #3B3B3B;
  --ids_color_bg_base: #FFFFFF;
  --ids_color_bg_variant_01: #F1F2F4;
  --ids_color_border_soft: #CFD1D3;
  --ids_size_cornerRadius_button: 0.75rem;
  --ids_size_cornerRadius_tags_01: 0.25rem;
  --ids_size_border_small: 0.0625rem;
  --ids_size_general_8x: 0.5rem;
  --ids_size_general_20x: 1.25rem;
}

.ids-markdown {
  font-family: sans-serif;
  margin: 10px;
  width: 100%;
}

.ids-markdown .tabs-ids {
  display: flex;
  flex-wrap: wrap;
  background: none;
  border: var(--ids_size_border_small) solid var(--ids_color_border_soft);
  border-bottom-left-radius: var(--ids_size_cornerRadius_tags_01);
  border-bottom-right-radius: var(--ids_size_cornerRadius_tags_01);
  border-top-left-radius: var(--ids_size_cornerRadius_button);
  border-top-right-radius: var(--ids_size_cornerRadius_button);
  margin: 20px;
}

.ids-markdown .tabs-ids .tabs-input {
  position: absolute;
  opacity: 0;
}

.ids-markdown .tabs-ids .tabs-label {
  border-right: var(--ids_size_border_small) solid var(--ids_color_border_soft);
  color: var(--ids_color_action_neutral_base);
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition: background 0.1s, color 0.1s;
  /* width: 100%; */
  width: auto;
  align-items: center;
  display: flex;
  filter: saturate(0);
  justify-content: center;
  padding: var(--ids_size_general_8x) var(--ids_size_general_20x);
}

.ids-markdown .tabs-ids .tabs-label img {
  height: 1.625rem;
}

.ids-markdown .tabs-ids .tabs-label:hover,
.ids-markdown .tabs-ids .tabs-label:active {
  filter: saturate(1);
}

.ids-markdown .tabs-ids .tabs-input:focus+.tabs-label {
  z-index: 1;
}

.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label:nth-child(2) {
  border-top-left-radius: var(--ids_size_cornerRadius_button);
}

.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label {
  background-color: var(--ids_color_bg_variant_01);
  color: var(--ids_color_action_neutral_base);
  filter: saturate(1);
}

.ids-markdown .tabs-ids .tabs-panel {
  background-color: var(--ids_color_bg_variant_01);
  border-top: var(--ids_size_border_small) solid var(--ids_color_border_soft);
  display: none;
  order: 99;
}

.ids-markdown .tabs-ids .tabs-panel section {
  background: var(--ids_color_bg_base);
  padding: 20px 30px 30px;
}

.ids-markdown .tabs-ids .tabs-panel .pre {
  border: unset;
  border-radius: unset;
  border-bottom-left-radius: var(--ids_size_cornerRadius_tags_01);
  border-bottom-right-radius: var(--ids_size_cornerRadius_tags_01);
  margin: 0px;
  width: 100%;
}

.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label+.tabs-panel {
  display: block;
}

And the small HTML code:
<div class="ids-markdown">
  <div class="tabs-ids">
    <input class="tabs-input" id="tab-ids-1" name="tabs-ids" type="radio" checked>
    <label class="tabs-label" for="tab-ids-1"><img src="https://cdn-icons-png.flaticon.com/128/546/546049.png" alt="Linux"></label>
    <div class="tabs-panel">
      <section>
        <h1>Arlina Design</h1>
        <p>Arlina Design (specifically, the sweet orange) is the fruit of the citrus species Citrus × sinensis in the family Rutaceae</p>
        <p>The fruit of the Citrus × sinensis is considered a sweet orange, whereas the fruit of the Citrus × aurantium is considered a bitter orange. The sweet orange reproduces asexually (apomixis through nucellar embryony); varieties of sweet orange arise through mutations.</p>
      </section>
    </div>
    <input class="tabs-input" id="tab-ids-2" name="tabs-ids" type="radio">
    <label class="tabs-label" for="tab-ids-2"><img src="https://cdn-icons-png.flaticon.com/128/1532/1532546.png" alt="macOS"></label>
    <div class="tabs-panel">
      <section>
        <h1>Idntheme</h1>
        <p>Idntheme (Citrus tangerina) is an orange-colored citrus fruit that is closely related to, or possibly a type of, mandarin orange (Citrus reticulata).</p>
        <p>The name was first used for fruit coming from Tangier, Morocco, described as a mandarin variety. Under the Tanaka classification system, Citrus tangerina is considered a separate species.</p>
      </section>
    </div>
    <input class="tabs-input" id="tab-ids-3" name="tabs-ids" type="radio">
    <label class="tabs-label" for="tab-ids-3"><img src="https://cdn-icons-png.flaticon.com/128/1532/1532543.png" alt="Windows"></label>
    <div class="tabs-panel">
      <section>
        <h1>Tekno Match</h1>
        <p>Tekno Match (Citrus ×clementina) is a hybrid between a mandarin orange and a sweet orange, so named in 1902. The exterior is a deep orange colour with a smooth, glossy appearance. Clementines can be separated into 7 to 14 segments. Similarly to
          tangerines, they tend to be easy to peel.</p>
      </section>
    </div>
  </div>
</div>

html css
1个回答
0
投票

您有一个弹性容器

.tabs-ids
，其中包含选项卡按钮和单击此类按钮时要显示的实际内容。

在更宽的屏幕上，元素保持在同一行而不是换行到下一行的原因（你所说的我的选项卡移动到大屏幕上的垂直侧）是因为你的弹性布局根据它们的排列这些元素大小取决于其内容。

您需要避免这种行为是根据要显示的实际内容对元素设置不同的样式。

如果您只是向包含实际内容的元素添加一个新类，您可以设置它们的样式以确保它们占据容器的 100% 宽度，并且它们肯定会换行到下一行。

这是我对代码的样式部分所做的唯一修改：

.tabs-panel.actual-content {
  width: 100%;
}

另外，我将 

actual-content
类添加到包含文本内容的元素中。

:root {
  --ids_color_action_neutral_base: #3B3B3B;
  --ids_color_bg_base: #FFFFFF;
  --ids_color_bg_variant_01: #F1F2F4;
  --ids_color_border_soft: #CFD1D3;
  --ids_size_cornerRadius_button: 0.75rem;
  --ids_size_cornerRadius_tags_01: 0.25rem;
  --ids_size_border_small: 0.0625rem;
  --ids_size_general_8x: 0.5rem;
  --ids_size_general_20x: 1.25rem;
}

.ids-markdown {
  font-family: sans-serif;
  margin: 10px;
  width: 100%;
}

.ids-markdown .tabs-ids {
  display: flex;
  flex-wrap: wrap;
  background: none;
  border: var(--ids_size_border_small) solid var(--ids_color_border_soft);
  border-bottom-left-radius: var(--ids_size_cornerRadius_tags_01);
  border-bottom-right-radius: var(--ids_size_cornerRadius_tags_01);
  border-top-left-radius: var(--ids_size_cornerRadius_button);
  border-top-right-radius: var(--ids_size_cornerRadius_button);
  margin: 20px;
}

.ids-markdown .tabs-ids .tabs-input {
  position: absolute;
  opacity: 0;
}

.ids-markdown .tabs-ids .tabs-label {
  border-right: var(--ids_size_border_small) solid var(--ids_color_border_soft);
  color: var(--ids_color_action_neutral_base);
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition: background 0.1s, color 0.1s;
  /* width: 100%; */
  width: auto;
  align-items: center;
  display: flex;
  filter: saturate(0);
  justify-content: center;
  padding: var(--ids_size_general_8x) var(--ids_size_general_20x);
}

.ids-markdown .tabs-ids .tabs-label img {
  height: 1.625rem;
}

.ids-markdown .tabs-ids .tabs-label:hover,
.ids-markdown .tabs-ids .tabs-label:active {
  filter: saturate(1);
}

.ids-markdown .tabs-ids .tabs-input:focus+.tabs-label {
  z-index: 1;
}

.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label:nth-child(2) {
  border-top-left-radius: var(--ids_size_cornerRadius_button);
}

.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label {
  background-color: var(--ids_color_bg_variant_01);
  color: var(--ids_color_action_neutral_base);
  filter: saturate(1);
}

.ids-markdown .tabs-ids .tabs-panel {
  background-color: var(--ids_color_bg_variant_01);
  border-top: var(--ids_size_border_small) solid var(--ids_color_border_soft);
  display: none;
  order: 99;
}

.ids-markdown .tabs-ids .tabs-panel section {
  background: var(--ids_color_bg_base);
  padding: 20px 30px 30px;
}

.ids-markdown .tabs-ids .tabs-panel .pre {
  border: unset;
  border-radius: unset;
  border-bottom-left-radius: var(--ids_size_cornerRadius_tags_01);
  border-bottom-right-radius: var(--ids_size_cornerRadius_tags_01);
  margin: 0px;
  width: 100%;
}

.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label+.tabs-panel {
  display: block;
}

.tabs-panel.actual-content {
  width: 100%;
}
<div class="ids-markdown">
  <div class="tabs-ids">
    <input class="tabs-input" id="tab-ids-1" name="tabs-ids" type="radio" checked>
    <label class="tabs-label" for="tab-ids-1"><img src="https://cdn-icons-png.flaticon.com/128/546/546049.png" alt="Linux"></label>
    <div class="tabs-panel actual-content">
      <section>
        <h1>Arlina Design</h1>
        <p>Arlina Design (specifically, the sweet orange) is the fruit of the citrus species Citrus × sinensis in the family Rutaceae</p>
        <p>The fruit of the Citrus × sinensis is considered a sweet orange, whereas the fruit of the Citrus × aurantium is considered a bitter orange. The sweet orange reproduces asexually (apomixis through nucellar embryony); varieties of sweet orange arise
          through mutations.</p>
      </section>
    </div>
    <input class="tabs-input" id="tab-ids-2" name="tabs-ids" type="radio">
    <label class="tabs-label" for="tab-ids-2"><img src="https://cdn-icons-png.flaticon.com/128/1532/1532546.png" alt="macOS"></label>
    <div class="tabs-panel actual-content">
      <section>
        <h1>Idntheme</h1>
        <p>Idntheme (Citrus tangerina) is an orange-colored citrus fruit that is closely related to, or possibly a type of, mandarin orange (Citrus reticulata).</p>
        <p>The name was first used for fruit coming from Tangier, Morocco, described as a mandarin variety. Under the Tanaka classification system, Citrus tangerina is considered a separate species.</p>
      </section>
    </div>
    <input class="tabs-input" id="tab-ids-3" name="tabs-ids" type="radio">
    <label class="tabs-label" for="tab-ids-3"><img src="https://cdn-icons-png.flaticon.com/128/1532/1532543.png" alt="Windows"></label>
    <div class="tabs-panel actual-content">
      <section>
        <h1>Tekno Match</h1>
        <p>Tekno Match (Citrus ×clementina) is a hybrid between a mandarin orange and a sweet orange, so named in 1902. The exterior is a deep orange colour with a smooth, glossy appearance. Clementines can be separated into 7 to 14 segments. Similarly to
          tangerines, they tend to be easy to peel.</p>
      </section>
    </div>
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.