gpt4 book ai didi

HTML, CSS - 将垂直标签对齐到中心

转载 作者:太空宇宙 更新时间:2023-11-04 08:06:35 25 4
gpt4 key购买 nike

我尝试了 W3School 的这个垂直标签教程,我想在我的网站上应用相同的方法。无论如何,在减小宽度尺寸后,我似乎无法对齐页面中心的垂直选项卡。我尝试在代码的开头添加 div 并尝试将 div 对齐到中心但仍然没有这样做。

需要这方面的帮助。

function openTest(evt, testName) {
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(testName).style.display = "block";
evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();
body {
background-color: #d62929;
font-family: Verdana, sans-serif;
margin: 0;
}

.ul1 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: whitesmoke;
font-weight: bold;
font-size: 18px;
}

.li1 {
float: left;
}

.li1 a,
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 22px 30px;
text-decoration: none;
}

.li1 a:hover,
.dropdown:hover .dropbtn {
background-color: #c12525;
color: white;
}

.li1.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: whitesmoke;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 20px 20px;
text-decoration: none;
display: block;
text-align: left;
font-size: 15px;
}

.dropdown-content a:hover {
background-color: #c12525;
}

.dropdown:hover .dropdown-content {
display: block;
}

.active {
background-color: #d62929;
color: white;
font-weight: bold;
font-size: 18px;
}

@media screen and (max-width: 600px) {
ul1 li1,
ul1 li1 {
float: none;
}
}


/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
footer {
-webkit-order: 3;
order: 3;
}
}

footer {
background: #aaa;
color: #fff;
text-align: center;
padding: 1rem;
clear: both;
/* clearing floating affects from both left,right sides */
}

.footp {
margin: 0;
padding: 0;
margin-left: 20px;
display: inline-block;
line-height: 30px;
vertical-align: top;
}


/* Style the tab */

div.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}


/* Style the buttons inside the tab */

div.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}


/* Change background color of buttons on hover */

div.tab button:hover {
background-color: #ddd;
}


/* Create an active/current "tab button" class */

div.tab button.active {
background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
float: inherit;
padding: 0px 12px;
border: 1px solid #ccc;
width: 90%;
border-left: none;
height: 320px;
}

.align {
display: inline-block;
}
<div class="flex-container">
<ul class="ul1">
<li class="li1"><a class="active" href="home.html">Home</a></li>
<li class="dropdown li1">
<a href="javascript:void(0)" class="dropbtn">Study</a>
<div class="dropdown-content">
<a href="mainFrame.html">Conduct Study</a>
<a href="report.html">Reports</a>
</div>
</li>
<li class="li1"><a href="contact.html">Contact</a></li>
</ul>
<br /><br /><br /><br /><br /><br />
<div class="tab">
<button class="tablinks" onclick="openTest(event, 'Full')" id="defaultOpen">Full</button>
<button class="tablinks" onclick="openTest(event, 'QRC')">QRC</button>
<button class="tablinks" onclick="openTest(event, 'Cold')">Cold</button>
<button class="tablinks" onclick="openTest(event, 'Hot')">Hot</button>
<button class="tablinks" onclick="openTest(event, 'Room')"> Room</button>
</div>

<div id="Full" class="tabcontent">
<h3>Full</h3>
<p>Test</p>
<ul class="align">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>

<div id="QRC" class="tabcontent">
<h3>QRC</h3>
<p>Test</p>
<ul class="align">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>

<div id="Cold" class="tabcontent">
<h3>Cold</h3>
<p>Test</p>
<ul class="align">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>

<div id="Hot" class="tabcontent">
<h3>Hot</h3>
<p>Test</p>
<ul class="align">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>

<div id="Room" class="tabcontent">
<h3>Room</h3>
<p>Test</p>
<ul class="align">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br />

<div>
<footer>
<p class="footp">&copy;All rights reserved.</p>
<p class="footp">|</p>
<p class="footp">Internal Use Only</p>
<p class="footp">|</p>
<p class="footp">Maintained By</p>
</footer>
</div>

最佳答案

我的解决方案涉及将 div 与类 .tab.tabcontent 包装在另一个 div 中并应用 flex 到那个包装器 div。这也要求 .tabcontent 有一个宽度,以免占据 pa 的整个宽度

新的 HTML

<div class="verticalTabContainer">
<div class="tab">
...
</div>

<div id="Full" class="tabcontent">
...
</div>

<div id="QRC" class="tabcontent">
...
</div>

<div id="Cold" class="tabcontent">
...
</div>

<div id="Hot" class="tabcontent">
...
</div>

<div id="Room" class="tabcontent">
...
</div>

额外的 CSS

.verticalTabContainer {
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
}

.tabcontent {
width: 50%;
}

function openTest(evt, testName) {
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(testName).style.display = "block";
evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();
body {
background-color: #d62929;
font-family: Verdana, sans-serif;
margin: 0;
}

.ul1 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: whitesmoke;
font-weight: bold;
font-size: 18px;
}

.li1 {
float: left;
}

.li1 a,
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 22px 30px;
text-decoration: none;
}

.li1 a:hover,
.dropdown:hover .dropbtn {
background-color: #c12525;
color: white;
}

.li1.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: whitesmoke;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 20px 20px;
text-decoration: none;
display: block;
text-align: left;
font-size: 15px;
}

.dropdown-content a:hover {
background-color: #c12525;
}

.dropdown:hover .dropdown-content {
display: block;
}

.active {
background-color: #d62929;
color: white;
font-weight: bold;
font-size: 18px;
}

@media screen and (max-width: 600px) {
ul1 li1,
ul1 li1 {
float: none;
}
}


/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
footer {
-webkit-order: 3;
order: 3;
}
}

footer {
background: #aaa;
color: #fff;
text-align: center;
padding: 1rem;
clear: both;
/* clearing floating affects from both left,right sides */
}

.footp {
margin: 0;
padding: 0;
margin-left: 20px;
display: inline-block;
line-height: 30px;
vertical-align: top;
}


/* Style the tab */

div.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}


/* Style the buttons inside the tab */

div.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}


/* Change background color of buttons on hover */

div.tab button:hover {
background-color: #ddd;
}


/* Create an active/current "tab button" class */

div.tab button.active {
background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
float: inherit;
padding: 0px 12px;
border: 1px solid #ccc;
width: 90%;
border-left: none;
height: 320px;
}

.align {
display: inline-block;
}

.verticalTabContainer {
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
}

.tabcontent {
width: 50%;
}
<div class="flex-container">
<ul class="ul1">
<li class="li1"><a class="active" href="home.html">Home</a></li>
<li class="dropdown li1">
<a href="javascript:void(0)" class="dropbtn">Study</a>
<div class="dropdown-content">
<a href="mainFrame.html">Conduct Study</a>
<a href="report.html">Reports</a>
</div>
</li>
<li class="li1"><a href="contact.html">Contact</a></li>
</ul>
<br /><br /><br /><br /><br /><br />

<div class="verticalTabContainer">
<div class="tab">
<button class="tablinks" onclick="openTest(event, 'Full')" id="defaultOpen">Full</button>
<button class="tablinks" onclick="openTest(event, 'QRC')">QRC</button>
<button class="tablinks" onclick="openTest(event, 'Cold')">Cold</button>
<button class="tablinks" onclick="openTest(event, 'Hot')">Hot</button>
<button class="tablinks" onclick="openTest(event, 'Room')"> Room</button>
</div>

<div id="Full" class="tabcontent">
<h3>Full</h3>
<p>Test</p>
<ul class="align">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>

<div id="QRC" class="tabcontent">
<h3>QRC</h3>
<p>Test</p>
<ul class="align">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>

<div id="Cold" class="tabcontent">
<h3>Cold</h3>
<p>Test</p>
<ul class="align">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>

<div id="Hot" class="tabcontent">
<h3>Hot</h3>
<p>Test</p>
<ul class="align">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>

<div id="Room" class="tabcontent">
<h3>Room</h3>
<p>Test</p>
<ul class="align">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
<br /><br /><br /><br /><br /><br />

<div>
<footer>
<p class="footp">&copy;All rights reserved.</p>
<p class="footp">|</p>
<p class="footp">Internal Use Only</p>
<p class="footp">|</p>
<p class="footp">Maintained By</p>
</footer>
</div>

关于HTML, CSS - 将垂直标签对齐到中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46579085/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com