菜單調整大小代碼的問題

我正在嘗試爲應用程序編寫一個餐廳水平列表欄。我想創建一個水平菜單，在屏幕上顯示它自己的所有選項中的3個選項，當中間的一個是最大尺寸的，並且旁邊的兩個尺寸較小時，並且當我水平滾動以查找我的餐廳時大小根據當前屏幕上的選項而改變。除了不斷變化的尺寸部分，我還寫了所有內容，如果有人能幫助我，我會很樂意。菜單調整大小代碼的問題

我的HTML代碼：

<!DOCTYPE html> 

<html lang="en"> 

<head> 

    <meta charest="utf-8" /> 

    <title>main screen</title> 

    <link rel="stylesheet" type="text/css" href="question.css" /> 

</head> 

<body> 
    <div class="wrapper"> 

     <h1> choose your restaurant </h1> 
     <div class="lists"> 
      <ul> 
       <li> 
        <a href="#">pastori</a> 
       </li> 
       <li> 
        <a href="#">moses</a> 
       </li> 
       <li> 
        <a href="#">pizza</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</body> 
</html>

我的CSS代碼

* { 
    padding: 0; 
    margin: 0; 
} 
h1 { 
    text-align: center; 
    font-size: 30px; 
    margin: 30px 0px; 
} 
ul { 
    list-style-type: none; 
    margin: 0px auto; 
    overflow-x: auto; 
    width: 340px; 
} 
li { 
    float: left; 
    width: 100px; 
    height: 30px; 
    margin: 0px 4px; 
    border: 2px solid #111; 
    border-radius: 3px; 
} 
li a { 
    display: inline-block; 
    color: black; 
    margin: 0px 4px; 
    width: 100px; 
    height: 30px; 
    line-height: 30px; 
    text-decoration: none; 
    text-align: center; 
}  
.wrapper { 
    text-align: center; 
}

來源

2016-12-16 barrot9

li{display:inline-block}

這將水平對齊貴麗標籤:)

JSFiddle

來源

2016-12-16 12:16:30

我無法正確理解您的查詢。請分享你想要的屏幕截圖。

h1{ text-align: center; font-size: 30px; margin: 30px 0px;} ul { list-style-type: none; margin: 0px auto; overflow-x: auto; width: 340px; } li { float: left; width: 100px; height: 30px; margin: 0px 4px; border: 2px solid #111; border-radius: 3px;} li a { display: inline-block; color: black; margin: 0px 4px; width: 100px; height: 30px; line-height: 30px; text-decoration: none; text-align: center; } .wrapper{ text-align: center; } 
 

 
li:hover{ 
 
    height: 60px; 
 
    background-color:red; 
 
}

<title>main screen</title> 
 

 
<link rel="stylesheet" type="text/css" href="question.css" /> 
 
    <h1> choose your restaurant </h1> 
 
    <div class="lists"> 
 
     <ul> 
 
      <li> 
 
       <a href="#">pastori</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">moses</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">pizza</a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

來源

2016-12-16 12:36:53

菜單調整大小代碼的問題

回答

相關問題