CSS选项卡宽度自动调整大小

Posted 2023-03-25

【中文标题】CSS选项卡宽度自动调整大小

【英文标题】：CSS tabs width auto-resize

【发布时间】：2021-08-09 19:42:59

【问题描述】：

我正在创建一个新的布局来了解 flex，这是某种圣杯，但在 flex 中。我面临的问题是标签导航，因为我希望布局在 PC 和移动设备中正常工作，我需要标签自动调整大小。

没有脚本没有插件没有复杂性，只有干净简单的 CSS。

我希望布局在 PC 上显示最大宽度为 1281 像素的标签导航，如果屏幕像手机或平板电脑一样小，它将使用所有小型设备。

我是这样做的：

function openCity(evt, cityName) 
  var i, tabcontent, tablinks;
  
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) 
    tabcontent[i].style.display = "none";
  
  
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) 
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  
  
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";


// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

@charset "UTF-8";
html,
body 
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background: #fff;


body 
  display: flex;
  flex-direction: column;


header 
  height: 75px;
  margin: 0 auto;


main 
  flex: auto;
  margin: 0 auto;


.contenido 
  width: 1280px;
  background: #212121;
  height: auto;
  border-radius: 4px;
  border: 2px solid #000000;
  padding: 10px;



/* Style the tab */

.tab 
  overflow: hidden;
  border-radius: 4px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #555555;
  background-color: #212121;



/* Style the buttons inside the tab */

.tab button 
  background-color: #212121;
  display: inline-block;
  border: none;
  outline: none;
  cursor: pointer;
  height: 100px;
  width: 20%;
  transition: 0.3s;
  font-size: 17px;
  color: #fff;



/* Change background color of buttons on hover */

.tab button:hover 
  background-color: #ddd;



/* Create an active/current tablink class */

.tab button.active 
  background-color: orange;
  color: #fff;



/* Style the tab content */

.tabcontent 
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;


footer 
  height: 25px;
  margin: 0 auto;

<header>header</header>
<main>
  <div class="contenido">
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'welcome')" id="defaultOpen">Welcome</button>
      <button class="tablinks" onclick="openCity(event, 'airdrop')">Airdrop</button>
      <button class="tablinks" onclick="openCity(event, 'presale')">Presale</button>
      <button class="tablinks" onclick="openCity(event, 'roadmap')">Roadmap</button>
    </div>
    <div id="welcome" class="tabcontent">
      <h3>Welcome</h3>
      <p>London is the capital city of England.</p>
    </div>
    <div id="airdrop" class="tabcontent">
      <h3>Airdrop</h3>
      <p>Paris is the capital of France.</p>
    </div>
    <div id="presale" class="tabcontent">
      <h3>Presale</h3>
      <p>Paris is the capital of France.</p>
    </div>
    <div id="roadmap" class="tabcontent">
      <h3>Roadmap</h3>
      <p>Tokyo is the capital of Japan.</p>
    </div>
  </div>
</main>
<footer>footer</footer>

问题是在 css 中使用宽度 1281 它不会在像移动设备这样的小屏幕上自动调整大小，如果我设置 % width 它在小型设备上也会显示错误...

我需要的是：

在电脑上最大 1281 像素宽度，在移动设备上 98% 的设备宽度。标签是问题所在。我希望标签是任何屏幕分辨率的 25%，因此它们总是显示内联块。

有什么问题？

链接到 Fiddle 进行实时演示 https://jsfiddle.net/vzd8re35/

【问题讨论】：

为什么不把.tab也做成一个弹性容器呢？和max-width: 1280px; 而不是width: 1280px; 而且因为你知道你的断点使用媒体查询

你能告诉我如何使用小提琴吗？我是菜鸟:)

不，最终结果还不清楚，所以我不能编写我不确定的代码，我给你一些建议来指导你，因为你正在尝试学习一个新概念, 我建议您删除所有内容并重新开始，并尝试将代码仅限于 flexbox，偶尔使用背景/边框来帮助您查看所有内容

【参考方案1】：

您可以尝试将 max-width 设置为 1280px，然后在同一元素上将宽度设置为 100%，如下所示：

.contenido 
    max-width: 1280px;
    width: 100%;

这意味着包装器的最大宽度为 1280px，并且只能增长到该宽度的 100% 或更小。

【讨论】：

我做到了，但它不起作用，因为标签缩小到大约 300 像素宽度