Я новичок в веб-разработке, поэтому извините, если мой вопрос кажется глупым.

  • После изучения концепции flexbox я попытался применить эту концепцию для разработки простого заголовка. Все шло идеально, но даже после использования свойства align-items:center элементы выглядят не по центру.

  • Затем я попытался использовать нижнюю границу для класса nav-main, чтобы подчеркнуть подчеркивание, но я не понимаю, почему подчеркивание не покрывает все пространство.

* {
  font-family: Arial, Helvetica, sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
}

.mainContainer {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  background-color: lemonchiffon;
  align-items: center;
}

.heading {
  order: 2;
}

.nav-main {
  border-bottom: 1px solid red;
  order: 1;
}

.nav-main li {
  display: inline;
  margin: 5px;
}
<div class="mainContainer">
  <h1 class="heading">The Peace</h1>
  <nav class="nav-main">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
</div>

< Сильный > < EM > Изменить Моя первая проблема решается с помощью следующего кода, но проблема подчеркивание остается прежней.

.nav-main ul{
padding-left: 0;
}
1
anonymous 27 Янв 2020 в 21:47

5 ответов

Лучший ответ

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

*{
font-family: Arial, Helvetica, sans-serif;
 }

html, body{
margin: 0;
padding: 0;
}
.mainContainer{
display: flex;
flex-direction: column;
border: 1px solid #ccc;
background-color: lemonchiffon;
justify-content: center;
align-items: center;
}

.heading{
order:2;
}

ul{
padding: 0;
}

.nav-main {
width: 100%;
text-align: center;
border-bottom: 1px solid red;
order:1;
}
.nav-main li{
display: inline;
margin: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="trialStyle.css">
</head>
<body>

   
<div class="mainContainer">
    <h1 class="heading">The Peace</h1>
    <nav class="nav-main">
        <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
    </nav>
</div>

</body>
</html>
1
anonymous 27 Янв 2020 в 19:15

РЕЗУЛЬТАТ:

enter image description here

CSS:

.mainContainer {
  display: flex;
  flex-direction: column;
  background-color: lemonchiffon;
}


.nav-main {
  border-bottom: 1px solid red;
  order: 1;  
}

.heading {
  order: 2;
  text-align: center;
}

 .nav-main li {
  display: inline;
  margin: 5px;
} 

.nav-main ul {
  display: flex;
  justify-content: center;
}

HTML:

  <div class="mainContainer">
    <h1 class="heading">The Peace</h1>

    <nav class="nav-main">
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>
  </div>
0
Wilson 27 Янв 2020 в 23:19

Установите .nav-main ul padding в 0:

* {
font-family: Arial, Helvetica, sans-serif;
}

html,
body {
margin: 0;
padding: 0;
}

.mainContainer {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
background-color: lemonchiffon;
align-items: center;
}

.heading {
order: 2;
}

.nav-main {
border-bottom: 1px solid red;
order: 1;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.nav-main ul {
  padding: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-main li {
display: inline;
margin: 5px;
}
<body>
  <div class="mainContainer">
    <h1 class="heading">The Peace</h1>
    <nav class="nav-main">
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>
  </div>
</body>
2
yerme 27 Янв 2020 в 19:07

Здравствуйте. Свойства вашего контента в li в ul не выровнены идеально, потому что вы дали ему отступ в 5px, и это сместит самый правый li на 5px вправо. Попробуйте сделать ваш ul также flexbox и дать ему свойство justify-content пространства-равномерно ...

0
Jay Junior 27 Янв 2020 в 19:34

Для проблемы подчеркивания вам нужно установить ширину nav-main как 100% и эти значения flexbox

width: 100%;
justify-content: center;
display: flex;
1
Henrique 27 Янв 2020 в 18:59