Как центрировать и уменьшить пространство между этими ссылками?

Question

Я хочу, чтобы ссылки были ближе друг к другу? Они разложены, и было даже больно пытаться отцентрировать их. Ссылки (закуска, Entres, т. Д.).

Любая помощь или советы будут оценены.

// 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"> $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>

Я не включил все, потому что это слишком долго. Но в основном, когда вы нажимаете на ссылки, это показывает различные пункты меню.

Спасибо.

Answer 1

Вам нужно изменить теги привязки обёртки на display:inline-block и применить 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>