如何居中和减少这些链接之间的space？

Question

我想让链接靠得更近吗？它们散开，甚至试图让它们居中也很痛苦。链接（开胃菜、主菜等）。

如有任何帮助或提示，我们将不胜感激。

// 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;
}

<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"> </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"> </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"></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"></button></p>

          </div>
        </div>
      </div>

    </div>
  </div>

我没有包括所有内容，因为它太长了。但基本上，当您单击链接时，它会显示不同的菜单项。

谢谢。

Answer 1

您需要将环绕锚标记更改为 display:inline-block 并在 left/right 上应用 margin。

此外，删除过时的 <center> 标记并向 .SmallHeader 元素添加 text-align 规则。

样式规则

您可以在样式表末尾添加以下规则来固定菜单项之间的间距。

.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"> </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"> </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"></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"></button></p>
          </div>
        </div>
      </div>
    </div>
  </div>

如何居中和减少这些链接之间的space？

How to center and reducing the space between these links?

html

javascript

css

hyperlink

responsive

样式规则

演示