我目前正在重构我的一个Firefox插件，我注意到一个翻译中出现的问题:我有一个标签开关，它是一个有2列的CSS网格，两个列的宽度都是50%。对于较短的标签标题，一切都如预期的那样工作，但较长的标题溢出。
相反，我想要更长的标题来扩大它们各自的列。tab-buttons的宽度应相同，tab-button-container的宽度应与fit-content相同。虽然可以为tab-button-container宽度设置一个适当的绝对值，但我不想不必要地浪费任何屏幕空间。
你能帮我吗?谢谢你！
html {
overflow: hidden;
padding: 0px;
margin: 0px;
border: none;
width: max-content;
height: fit-content;
font-size: 14px;
}
body {
overflow: hidden;
font-family: sans-serif;
margin: 0px;
height: fit-content;
width: max-content;
border: none;
}
main {
padding-left: 20px;
padding-right: 20px;
width: max-content;
}
.tab-button-container {
grid-template-columns: repeat(2, calc(50% - 2px));
padding: 4px;
column-gap: 4px;
width: calc(100% - 4px);
min-width: max-content;
display: grid;
position: relative;
left: 50%;
transform: translate(-50%,0);
background-color: rgb(226, 226, 226);
border-radius: 5px;
cursor: default;
margin-top: 20px;
margin-bottom: 20px;
}
.tab-button {
white-space: nowrap;
display: inline-block;
padding-left: 15px;
padding-right: 15px;
padding-top: 8px;
padding-bottom: 8px;
border-radius: 5px;
cursor: pointer;
text-align: center;
}
.tab-button--active {
background-color: #0a84ff;
color: white;
}
.tab-button--inactive {
background-color: transparent;
color: #676767;
transition: 0.3s;
}
.tab-button--inactive:hover {
background-color: rgb(200, 200, 200);
transition: 0.3s;
}<html>
<body>
<main>
<div class="tab-button-container">
<span class="tab-button tab-button-encrypt tab-button--active">
<i class="fas fa-lock"></i>
<a class="tab-button-label">Salataan</a>
</span>
<span class="tab-button tab-button-decrypt tab-button--inactive">
<a class="tab-button-label">Salaus puretaan loremipsum</a>
</span>
</div>
</main>
</body>
</html>溢出问题是由于:.tab-button-container { grid-template-columns: repeat(2, calc(50% - 2px)); }的宽度有限造成的。您需要更改列宽度以适合内容:
html {
overflow: hidden;
padding: 0px;
margin: 0px;
border: none;
width: max-content;
height: fit-content;
font-size: 14px;
}
body {
overflow: hidden;
font-family: sans-serif;
margin: 0px;
height: fit-content;
width: max-content;
border: none;
}
main {
padding-left: 20px;
padding-right: 20px;
width: max-content;
}
.tab-button-container {
grid-template-columns: repeat(2, minmax(min-content, calc(50% - 2px)));
padding: 4px;
column-gap: 4px;
width: calc(100% - 4px);
min-width: max-content;
display: grid;
position: relative;
left: 50%;
transform: translate(-50%,0);
background-color: rgb(226, 226, 226);
border-radius: 5px;
cursor: default;
margin-top: 20px;
margin-bottom: 20px;
}
.tab-button {
white-space: nowrap;
display: inline-block;
padding-left: 15px;
padding-right: 15px;
padding-top: 8px;
padding-bottom: 8px;
border-radius: 5px;
cursor: pointer;
text-align: center;
}
.tab-button--active {
background-color: #0a84ff;
color: white;
}
.tab-button--inactive {
background-color: transparent;
color: #676767;
transition: 0.3s;
}
.tab-button--inactive:hover {
background-color: rgb(200, 200, 200);
transition: 0.3s;
}<html>
<body>
<main>
<div class="tab-button-container">
<span class="tab-button tab-button-encrypt tab-button--active">
<i class="fas fa-lock"></i>
<a class="tab-button-label">Salataan</a>
</span>
<span class="tab-button tab-button-decrypt tab-button--inactive">
<a class="tab-button-label">Salaus puretaan loremipsum</a>
</span>
</div>
</main>
</body>
</html>这就是解决方案。
html {
overflow: hidden;
padding: 0px;
margin: 0px;
border: none;
width: max-content;
height: fit-content;
font-size: 14px;
}
body {
overflow: hidden;
font-family: sans-serif;
margin: 0px;
height: fit-content;
width: max-content;
border: none;
}
main {
padding-left: 20px;
padding-right: 20px;
width: max-content;
}
.tab-button-container {
grid-template-columns: 1fr 1fr;
padding: 4px;
column-gap: 4px;
width: calc(100% - 4px);
min-width: max-content;
display: grid;
position: relative;
left: 50%;
transform: translate(-50%,0);
background-color: rgb(226, 226, 226);
border-radius: 5px;
cursor: default;
margin-top: 20px;
margin-bottom: 20px;
}
.tab-button {
white-space: nowrap;
display: inline-block;
padding-left: 15px;
padding-right: 15px;
padding-top: 8px;
padding-bottom: 8px;
border-radius: 5px;
cursor: pointer;
text-align: center;
}
.tab-button--active {
background-color: #0a84ff;
color: white;
}
.tab-button--inactive {
background-color: transparent;
color: #676767;
transition: 0.3s;
}
.tab-button--inactive:hover {
background-color: rgb(200, 200, 200);
transition: 0.3s;
}<html>
<body>
<main>
<div class="tab-button-container">
<span class="tab-button tab-button-encrypt tab-button--active">
<i class="fas fa-lock"></i>
<a class="tab-button-label">Salataan</a>
</span>
<span class="tab-button tab-button-decrypt tab-button--inactive">
<a class="tab-button-label">Salaus puretaan loremipsum</a>
</span>
</div>
</main>
</body>
</html>