Div在放大時無法響應

Question

我的問題是，在320px寬的移動視圖中，一切都看起來不錯，但是當我手動開始放大時，導航不會保持居中。它只停留在屏幕的左側，當右側變大時。標題（h1）正常放大。導航「按鈕」應保持相同的寬度，直到768px寬的中斷。

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; 
 
}

<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 1

在這裏看到：jsfiddle

你在li a同時使用display:flex和display:inline-block。只使用一個display。

我建議你不要上的按鈕使用固定寬度，而是使用float:left與percentage

還你說你想要的按鈕來保持相同的寬度，直到768px，但你設定的width: 280px * 3 = 840px寬度。所以當然三個按鈕不適合768px設備寬度。

還加入了媒體Q代表低於768px

檢查還片斷

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設備寬度。

還添加了介質Q代表下面768px

檢查還片斷

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} 
 
    } 
 
}

<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>