CSS 基础学习-146 css制作水平列表菜单制作

hrs 提交于 2021/11/03 - 08:31 , 周三

水平列表菜单制作

默认地,列表项是垂直显示的,在本例中,我们使用display:inline-block来水平地显示它们(并排)。

注释:如果您调整浏览器的大小,链接会在变得拥挤时自动换行。

实例代码:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      ul{
        background-color:yellow;
        width:600px;
        list-style-type:none;
        text-align:center;
        margin:0;
        padding:0;
      }
      li{
        display:inline-block;
        padding:10px;
        font-size:20px;
      }
      li:hover{
        background-color:green;
      }
      a:hover{
        color:white;
      }
    </style>
  </head>
  <body>
    <h1>水平列表菜单制作</h1>
    <p>默认地,列表项是垂直显示的,在本例中,我们使用display:inline-block来水平地显示它们(并排)。</p>
    <p>注释:如果您调整浏览器的大小,链接会在变得拥挤时自动换行。</p>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Our Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </body>
</html>

运行效果:

css-146.png

 

标签