如何居中并减少这些链接之间的空间？
我希望链接更紧密？它们分散开来，即使试图让它们居中也很痛苦。链接（开胃菜、主菜等）。
任何帮助或提示将不胜感激。
// Tabbed Menu
function openMenu(evt, menuName) {
var i, x, tablinks;
x = document.getElementsByClassName("menu");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(menuName).style.display = "block";
evt.currentTarget.firstElementChild.className += " w3-red";
}
document.getElementById("myLink").click();
body {
margin: 0;
font-family: georgia;
}
.MenuItems {
float: left;
width: 100%;
margin: 0px;
background-color: none;
color: black;
}
.Menu {
padding: 100px;
}
.w3-col {
float: left;
width: 100%;
margin: 0px;
background-color: none;
color: black;
}
.w3-col.s4 {
margin: auto;
width: 25%;
}
.w3-container,
.w3-panel {
padding: 0.01em 16px
}
@media (min-width:993px) {
.w3-col.l3 {
width: 24.99999%
}
}
.w3-center {
text-align: center!important
}
h3 {
font-family: 'Caladea', serif;
font-weight: normal;
font-size: 4em;
}
h2 {
font-family: 'Caladea', serif;
font-weight: normal;
font-size: 2em;
}
.SmallHeader {
font-family: 'Caladea', serif;
font-size: 140%;
padding-top: 10px;
font-weight: normal;
}
我没有包含所有内容，因为它太长了。但基本上，当您单击链接时，它会显示不同的菜单项。
慕工程0101907浏览 75回答 1
1回答
-
叮当猫咪
您需要将环绕锚标记更改为并在左/右display:inline-block应用 a 。margin另外，删除过时的<center>标签并向元素添加text-align规则.SmallHeader。风格规则您可以在样式表末尾添加以下规则来固定菜单项之间的间距。.Menu > .SmallHeader { text-align: center;}.Menu > .SmallHeader a { display: inline-block; margin: auto 0.5em; text-decoration: none;}.Menu > .SmallHeader a div.tablink { display: block; width: auto; float: none;}演示// Tabbed Menufunction openMenu(evt, menuName) { var i, x, tablinks; x = document.getElementsByClassName("menu"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < x.length; i++) { tablinks[i].className = tablinks[i].className.replace(" w3-red", ""); } document.getElementById(menuName).style.display = "block"; evt.currentTarget.firstElementChild.className += " w3-red";}document.getElementById("myLink").click();body { margin: 0; font-family: georgia;}.MenuItems { float: left; width: 100%; margin: 0px; background-color: none; color: black;}.Menu { padding: 100px;}.w3-col { float: left; width: 100%; margin: 0px; background-color: none; color: black;}.w3-col.s4 { margin: auto; width: 25%;}.w3-container,.w3-panel { padding: 0.01em 16px}@media (min-width:993px) { .w3-col.l3 { width: 24.99999% }}.w3-center { text-align: center!important}h3 { font-family: 'Caladea', serif; font-weight: normal; font-size: 4em;}h2 { font-family: 'Caladea', serif; font-weight: normal; font-size: 2em;}.SmallHeader { font-family: 'Caladea', serif; font-size: 140%; padding-top: 10px; font-weight: normal;}/* Addition */.Menu > .SmallHeader { text-align: center;}.Menu > .SmallHeader a { display: inline-block; margin: auto 0.5em; text-decoration: none;}.Menu > .SmallHeader a div.tablink { display: block; width: auto; float: none;}<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><link href="https://fonts.googleapis.com/css?family=Caladea&display=swap" rel="stylesheet"><div class="Menu" style="padding-top:50px"> <h3 class="w3-center">The Menu</h3> <div class="SmallHeader"> <!-- center --> <a href="javascript:void(0)" onclick="openMenu(event, 'Appetizers');" id="myLink"> <div class="w3-col s4 tablink w3-hover-red CenterEdit">Appetizers</div> </a> <a href="javascript:void(0)" onclick="openMenu(event, 'Entres');"> <div class=" w3-col s4 tablink w3-hover-red CenterEdit">Entres</div> </a> <a href="javascript:void(0)" onclick="openMenu(event, 'Starter');"> <div class=" w3-col s4 tablink w3-hover-red CenterEdit">Sides</div> </a> <a href="javascript:void(0)" onclick="openMenu(event, 'Starter');"> <div class=" w3-col s4 tablink w3-hover-red CenterEdit">Desserts</div> </a> <!-- center --> </div> <!-------------------------- Appetizers Start --------------------------> <div id="Appetizers" class="w3-container menu w3-padding-32 w3-white"> <div class="w3-row-padding w3-grayscale" style="margin-top:64px"> <div class="w3-col l3 m6 w3-margin-bottom"> <div class="w3-card"> <div class="w3-container"> <h2>Appetizer</h2> <p class="w3-opacity">Sub Header</p> <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <p><button class="w3-button w3-light-grey w3-block"> $15</button></p> </div> </div> </div> <div class="w3-col l3 m6 w3-margin-bottom"> <div class="w3-card"> <div class="w3-container"> <h2>Appetizer</h2> <p class="w3-opacity">Sub Header</p> <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <p><button class="w3-button w3-light-grey w3-block"> $20</button></p> </div> </div> </div> <div class="w3-col l3 m6 w3-margin-bottom"> <div class="w3-card"> <div class="w3-container"> <h2>Apetizer</h2> <p class="w3-opacity">Sub Header</p> <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <p><button class="w3-button w3-light-grey w3-block">$15</button></p> </div> </div> </div> <div class="w3-col l3 m6 w3-margin-bottom"> <div class="w3-card"> <div class="w3-container"> <h2>Fried Okra</h2> <p class="w3-opacity">Sub Header</p> <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <p><button class="w3-button w3-light-grey w3-block">$20</button></p> </div> </div> </div> </div> </div>
随时随地看视频慕课网APP
相关分类
Html5