时间戳

首页 > 解决方案 > 选项卡式导航换行，而不是在移动设备上包装选项卡文本

html - 选项卡式导航换行，而不是在移动设备上包装选项卡文本

问题描述

我有两个选项卡的选项卡式导航。当屏幕宽度减小到较小的移动设备（低于 415 像素）时，选项卡会进入两个不同的行，而不是包装选项卡文本，以便两个选项卡都保持在一行。我需要一些帮助来包装标签文本。我尝试设置 a max-width，更改一些显示选项，flex-wrap: wrap;但无济于事。

JSFiddle：https ://jsfiddle.net/Clubba/hqud9L46/2/

HTML

<div class="tab-wrap">
    <input type="radio" id="tab1" name="tabGroup1" class="tab" checked>
        <label for="tab1"><span style="font-family:Montserrat,sans serif;">Tab 1 title</span></label>
    <input type="radio" id="tab2" name="tabGroup1" class="tab">
         <label for="tab2"><span style="font-family:Montserrat,sans serif;">Tab 2 title</span></label>
            
  <div class="tab__content"><br />
Tab 1 content
  </div>
            
  <div class="tab__content"><br />
Tab 2 content
   </div>

</div>

CSS


.tab-wrap {
  -webkit-transition: 0.3s box-shadow ease;
  transition: 0.3s box-shadow ease;
  border-radius: 15px 15px 0 0;
  max-width: 90%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  list-style: none;
  background-color: #fff;
  margin: 40px 0;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.02), 0 1px 10px rgba(0, 0, 0, 0.1);

}

.tab {
  display: none;
}
.tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
  opacity: 1;
  -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
  transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease;
  position: relative;
  top: 0;
  z-index: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {
  opacity: 1;
  -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
  transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease;
  position: relative;
  top: 0;
  z-index: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  text-shadow: 0 0 0;
}

.tab:first-of-type:not(:last-of-type) + label {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.tab:not(:first-of-type):not(:last-of-type) + label {
  border-radius: 0;
}
.tab:last-of-type:not(:first-of-type) + label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.tab:checked + label {
  background-color: #fff;
  box-shadow: 0 -1px 0 #fff inset;
  cursor: default;
}
.tab:checked + label:hover {
  box-shadow: 0 -1px 0 #fff inset;
  background-color: #fff;
}

.tab:not(:checked) + label {
  color:#fff;
}

.tab + label {
  box-shadow: 0 -1px 0 #eee inset;
  border-radius: 15px 15px 0 0;
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: #333;
  -webkit-box-flex: 3;
      -ms-flex-positive: 3;
          flex-grow: 3;
  text-align: center;
  background-color: #34404d;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-align: center;
  -webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;
  transition: 0.3s background-color ease, 0.3s box-shadow ease;
  height: 80px;
  box-sizing: border-box;
  padding-top: 25px;
  padding-bottom: 5px;
 flex-wrap: wrap;
  max-width: 90%;
}
.tab + label:hover {
  background-color: #576c82;
  box-shadow: 0 1px 0 #f4f4f4 inset;
}
.tab__content {
  padding: 10px 25px;
  background-color: transparent;
  position: absolute;
  width: 100%;
  z-index: -1;
  opacity: 0;
  left: 0;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  border-radius: 6px;
}

标签： htmlcss

解决方案

制作flex-wrap:nowrap;和添加min-width: 50%到tab类将确保您的导航选项卡不会进入不同的行。但是这样做会给你的标签内容带来问题。而且您甚至不能将它们移动到不同的元素，因为这样您检查的伪元素将不起作用（它们仅适用于后代或兄弟姐妹）。当然可以有更好的解决方案，我不知道，但我意识到你可以做以下

  1. 因为您的问题归结为设置布局的布局，您可以使用网格而不是 flex，因为您需要 2D 布局来防止导航选项卡换行。

  2. 您可以利用位置并使选项卡内容的位置绝对相对于正文或导航选项卡。

推荐阅读