0

Ребят, столкнулся с проблемой. Когда присваиваю последнему элементу списка "Contact" (li: nth-child(5) в этом случае) границу, то он смещается. Нужно, чтобы он был на одном уровне с другими элементами.

введите сюда описание изображения

html,
body,
h1,
.menu {
  font-family: 'Gamja Flower', cursive;
  padding: 0;
  margin: 0;
}

header {
  background: url(Layer1.png) no-repeat center top / cover;
  width: 100%;
  height: 1200px;
}

header h1 {
  display: inline-block;
  font-weight: normal;
  margin-left: 100px;
}

.menu {
  display: inline-flex;
  flex-flow: row wrap;
  justify-content: center;
  margin-left: 13.875rem;
}

.menu li {
  display: inline-block;
  font-weight: bold;
  font-size: 22px;
  margin-left: 5rem;
}

.menu li a {
  text-decoration: none;
  color: #000;
}

.menu li:nth-child(5) {
  border: 1px solid black;
  padding: 10px;
  border-radius: 15px;
}

.captions {
  margin-top: 15rem;
}

.main-caption {
  font-weight: bold;
  display: block;
  margin-left: 0;
  margin-top: 8.25rem;
  text-align: center;
  line-height: 0.5;
}

header p {
  text-align: center;
  color: #a2a1a1;
}

.button {
  display: block;
  background-color: #50007d;
  padding: 15px;
  color: white;
  text-decoration: none;
  text-align: center;
  border-radius: 15px;
  width: 12.8125rem;
  margin: 4rem auto;
}

.mouse-icon {
  margin-left: 41.25rem;
  margin-top: 23.125rem;
}

.caption-under-mouse-icon {
  text-align: center;
  color: white;
}
<header>
  <nav>
    <h1><b>Interactive</b>Agency</h1>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Offer</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="captions">
    <h3 class="main-caption">Lorem Ipsum Dolor Sit Amet</h1>
      <p>Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</p>
      <a href="#" class="button">Ask for price</a>
  </div>
  <img class="mouse-icon" src="icon.png">
  <p class="caption-under-mouse-icon">scroll down</p>
</header>

3
  • Не помогло, к сожалению. 14 янв 2019 в 15:35
  • 2
    Может в .menu прописать align-items:center;
    – Frog
    14 янв 2019 в 15:39
  • Спасибо, @Frog , Ваш вариант помог! 15 янв 2019 в 14:49

2 ответа 2

2

html,
body,
h1,
.menu {
  font-family: 'Gamja Flower', cursive;
  padding: 0;
  margin: 0;
}

header {
  background: url(Layer1.png) no-repeat center top / cover;
  width: 100%;
  height: 1200px;
}

header h1 {
  display: inline-block;
  font-weight: normal;
  vertical-align: middle;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap
}

.menu {
  display: flex;
  flex-flow: nowrap;
  justify-content: space-around;
  align-items: center;
}

.menu li {
  list-style: none;
  font-size: 22px;
}

.menu li:not(:last-child) {
  margin-right: 20px;
}

.menu li a {
  text-decoration: none;
  color: #000;
}

.menu li:nth-child(5) {
  border: 1px solid black;
  padding: 10px;
  border-radius: 15px;
}

.captions {
  margin-top: 15rem;
}

.main-caption {
  font-weight: bold;
  display: block;
  margin-left: 0;
  margin-top: 8.25rem;
  text-align: center;
  line-height: 0.5;
}

header p {
  text-align: center;
  color: #a2a1a1;
}

.button {
  display: block;
  background-color: #50007d;
  padding: 15px;
  color: white;
  text-decoration: none;
  text-align: center;
  border-radius: 15px;
  width: 12.8125rem;
  margin: 4rem auto;
}

.mouse-icon {
  margin-left: 41.25rem;
  margin-top: 23.125rem;
}

.caption-under-mouse-icon {
  text-align: center;
  color: white;
}
<body>
  <header>
    <nav>
      <h1><b>Interactive</b>Agency</h1>
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Offer</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <div class="captions">
      <h3 class="main-caption">Lorem Ipsum Dolor Sit Amet</h1>
        <p>Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</p>
        <a href="#" class="button">Ask for price</a>
    </div>
    <img class="mouse-icon" src="icon.png">
    <p class="caption-under-mouse-icon">scroll down</p>
  </header>
</body>

</html>

0

Почему бы не использовать свойства

border: 1px solid transparent;
padding: 10px;
border-radius: 15px;

Для всех li, и пятому элементу уже выставлять

border-color: black;

???

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.