我希望链接更紧密？它们分散开来，即使试图让它们居中也很痛苦。链接（开胃菜、主菜等）。任何帮助或提示将不胜感激。// 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;}我没有包含所有内容，因为它太长了。但基本上，当您单击链接时，它会显示不同的菜单项。
1 回答
叮当猫咪
TA贡献1776条经验 获得超12个赞
您需要将环绕锚标记更改为并在左/右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 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;
}
/* 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>
- 1 回答
- 0 关注
- 74 浏览
添加回答
举报
0/150
提交
取消