Как сделать так, чтобы все навигационные ссылки выглядели одинаково? - PullRequest
Новая
       12

Как сделать так, чтобы все навигационные ссылки выглядели одинаково?

0 голосов
/ 01 декабря 2018

Я хотел, чтобы навигационные ссылки, показанные на скриншоте, имели одинаковые отступы вокруг них, независимо от длины текста (мой профессор сказал что-то насчет «оправдать», хотя я точно не помню, что).Кроме того, я хочу, чтобы меню растягивалось только до определенной ширины, после этого оно должно оставаться того же размера.

Навигационные ссылки, показывающие проблему заполнения в первой ссылке:

Navigation links

Это html навигационных ссылок: 

<nav id="navigation">
  <ul>
    <li><a id="nav-intro" href="#introduction">Introduction</a></li>
    <li><a id="nav-cont" href="#content">My Shoes</a></li>
    <li><a id="nav-loc" href="locations">Where I buy from</a></li>
    <li><a id="nav-care" href="care">Proper Care</a></li>
  </ul>
</nav>

Это CSS навигационных ссылок: 

nav a {
    background-color: #280e0e;
    border-radius: 15px;
    color: #C70039;
    display: block;
    font-size: 1.25em;
    padding-bottom: 0.444em;
    padding-top: 0.444em;
    align: center;
    text-decoration: none;
    max-width: 18.889em; 
}

nav ul li {
    text-align: center;
    padding-bottom: 11px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding-bottom: 0;
}

Вот медиа-запрос для моих навигационных ссылок: 

@media screen and (min-width: 484px){
    nav ul {
        display: flex;
        justify-content: center;
        margin: 0 -0.25em;
    }

    nav ul li {
        flex-grow: 1;
        margin: 0 0.25em;
        padding-left: 0.333em;
        padding-right: 0.333em;
    }

Это для школьного проекта, и я должен использовать только CSS, чтобы редактировать, как все выглядит.Я хотел бы продолжить использовать flexbox и не переходить ни на что другое.

Ответы [ 2 ]

0 голосов
/ 07 декабря 2018 

<!DOCTYPE html>
<html>
<head>
	<title>Nav menu</title>
	<style>

		ul {
			list-style-type: none;
			margin: 0;
			padding-bottom: 0;
			display: flex;	
		}
		nav ul li {
			text-align: center;
			padding-bottom: 11px;
			margin: 10px 10px;
		}
		nav a {
			background-color: #280e0e;
		    border-radius: 15px;
		    color: #C70039;
		    display: block;
		    word-break: normal;
		    white-space: pre;
		    font-size: 1.25em;
		    padding-bottom: 0.444em;
		    padding-top: 0.444em;
		    text-align: center;
		    text-decoration: none;
		    max-width: 18.889em;
		    padding-left: 15px;
		    padding-right: 15px;
		}

	</style>
</head>
<body>
	<nav id="navigation">
	  <ul>
	    <li><a id="nav-intro" href="#introduction">Introduction</a></li>
	    <li><a id="nav-cont" href="#content">My Shoes</a></li>
	    <li><a id="nav-loc" href="locations">Where I buy from</a></li>
	    <li><a id="nav-care" href="care">Proper Care</a></li>
	  </ul>
	</nav>
</body>
</html>
0 голосов
/ 01 декабря 2018

Мне удалось придумать это, но это немного расширяет рамки. 

nav a {
  background-color: #280e0e;
  border-radius: 15px;
  color: #C70039;
  display: block;
  font-size: 1.25em;
  padding-bottom: 0.444em;
  padding-top: 0.444em;
  align: center;
  text-decoration: none;
  max-width: 18.889em;
  height: 40px;
}

nav ul li {
  text-align: center;
  padding-bottom: 11px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding-bottom: 0;
}

@media screen and (min-width: 484px) {
  nav ul {
    display: flex;
    justify-content: center;
    margin: 0 -0.25em;
  }
  nav ul li {
    flex-grow: 1;
    margin: 0 0.25em;
    padding-left: 0.333em;
    padding-right: 0.333em;
  }
}
<nav id="navigation">
  <ul>
    <li><a id="nav-intro" href="#introduction">Introduction</a></li>
    <li><a id="nav-cont" href="#content">My Shoes</a></li>
    <li><a id="nav-loc" href="locations">Where I buy from</a></li>
    <li><a id="nav-care" href="care">Proper Care</a></li>
  </ul>
</nav>

Выше я включил фрагмент, но вы можете увидеть, что он работает в коде здесь .Вы также можете найти рабочий пример здесь, на моем сайте .

...