菜单调整大小代码的问题

我正在尝试为应用程序编写一个餐厅水平列表栏。我想创建一个水平菜单，在屏幕上显示它自己的所有选项中的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

菜单调整大小代码的问题

回答

相关问题