我正在尝试为应用程序编写一个餐厅水平列表栏。我想创建一个水平菜单，在屏幕本身上显示所有可用选项中的 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;
}
最佳答案
关于javascript - 菜单调整大小代码的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41184164/