Question

我的问题是，在320px宽的移动视图中，一切看起来都不错，但是当我开始手动放大时，导航器不会留在中心。当右侧变大时，它只会停留在屏幕的左侧。标题（h1）正常扩大。导航＆＃34;按钮＆＃34;应该保持相同的宽度，直到768px宽的断裂。

＆＃13;

body {
  background-color: #FAFAFA;
  font-family: helvetica;
  margin: 0;
  padding: 0;
}
.title {
  text-align: center;
  font-size: 1.5em;
  margin-top: 30px;
  margin-bottom: 30px;
  color: #626262;
}
/*** NAVIGATION ***/

.main-nav li {
  list-style: none;
}
.main-nav a {
  text-decoration: none;
  background-color: white;
  font-weight: 600;
  color: #626262;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: .75em;
  display: flex;
  display: inline-block;
  width: 280px;
  margin-top: 5px;
  text-align: center;
  margin-left: -20px;
}
.profile-icon {
  height: 125px;
  width: 200px;
}
/******  PORTFOLIO    ********/

.main-content {
  background-color: #FFFFFF;
}

＆＃13;

<header class="main-header">
  <div class="container">
    <h1 class="title">Title1</h1>

    <ul class="main-nav">
      <li><a href="#">HOME</a>
      </li>
      <li><a href="#">PORTFOLIO</a>
      </li>
      <li><a href="#">CONTACT</a>
      </li>
    </ul>

    <img src="images/responsive-layout-profile.png" class="profile-icon">

    <p>Text field</p>

  </div>
</header>
<div class="main-content">
  <h2 class="title-two">PORTFOLIO</h2>
</div>

＆＃13;

Answer 1

请参阅此处： jsfiddle

您在display:flex上同时使用display:inline-block和li a。只需使用一个display。

我建议您不要在按钮上使用固定宽度，而是使用float:left与percentage

你也说你希望按钮保持相同的宽度直到768px，但你设置宽度为width: 280px * 3 = 840px。所以当然三个按钮不适合768px的设备宽度。

还添加了低于768px的媒体Q

另请参阅片段

body {
    background-color: #FAFAFA;
    font-family: helvetica;
    margin: 0;
    padding: 0;
}

ul.main-nav {
  padding:0;
}

.title {
    text-align: center;
    font-size: 1.5em;
    margin-top: 30px;
    margin-bottom: 30px;
    color: #626262;
}

/*** NAVIGATION ***/

.main-nav li {
    list-style: none;
    float:left;
     width: 32.66%;
     margin-right:1%;
}

ul li:last-child { margin-right:0;}
.main-nav a {
    text-decoration: none;
    background-color: white;
    font-weight: 600;
    color: #626262;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: .75em;
    display:block;
   
    

    margin-top: 5px;
    text-align: center;

}

.profile-icon {
    height: 125px;
    width: 200px;


}





 /******  PORTFOLIO    ********/

.main-content {
    background-color: #FFFFFF;
}

@media only screen and (max-width: 768px) {
  
  .main-nav li { width:100%}
  }
}

<header class="main-header">
    <div class="container">
     <h1 class="title">Title1</h1>

     <ul class="main-nav">
        <li><a href="#">HOME</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>

    <img src="images/responsive-layout-profile.png" class="profile-icon">

    <p>Text field</p>

   </div>
 </header>
    <div class="main-content">
       <h2 class="title-two">PORTFOLIO</h2>
    </div>

Answer 2

请参阅此处： jsfiddle

您在display:flex上同时使用display:inline-block和li a。只需使用一个display。

我建议您不要在按钮上使用固定宽度，而是将float:left与percentage

一起使用

你也说你希望按钮保持相同的宽度直到768px，但你设置宽度为width: 280px * 3 = 840px。所以当然三个按钮不适合768px的设备宽度。

还添加了低于768px的媒体Q

另请参阅片段

＆＃13;

body {
    background-color: #FAFAFA;
    font-family: helvetica;
    margin: 0;
    padding: 0;
}

ul.main-nav {
  padding:0;
}

.title {
    text-align: center;
    font-size: 1.5em;
    margin-top: 30px;
    margin-bottom: 30px;
    color: #626262;
}

/*** NAVIGATION ***/

.main-nav li {
    list-style: none;
    float:left;
     width: 32.66%;
     margin-right:1%;
}

ul li:last-child { margin-right:0;}
.main-nav a {
    text-decoration: none;
    background-color: white;
    font-weight: 600;
    color: #626262;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: .75em;
    display:block;
   
    

    margin-top: 5px;
    text-align: center;

}

.profile-icon {
    height: 125px;
    width: 200px;


}





 /******  PORTFOLIO    ********/

.main-content {
    background-color: #FFFFFF;
}

@media only screen and (max-width: 768px) {
  
  .main-nav li { width:100%;margin:0}
  }
}

＆＃13;

<header class="main-header">
    <div class="container">
     <h1 class="title">Title1</h1>

     <ul class="main-nav">
        <li><a href="#">HOME</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>

    <img src="images/responsive-layout-profile.png" class="profile-icon">

    <p>Text field</p>

   </div>
 </header>
    <div class="main-content">
       <h2 class="title-two">PORTFOLIO</h2>
    </div>

＆＃13;

在扩大规模时，Div没有响应

2 个答案: