Question

我试图写一个餐馆水平列表栏进行申请。我想创建一个水平菜单，在屏幕上显示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; 
}

Answer 1

li{display:inline-block}

这会水平对齐你的li标签：）

JSFiddle

Answer 2

我无法正确理解您的查询。请分享您想要的屏幕截图。

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>

菜单调整大小代码的麻烦

2 个答案: