html 使用CSS内联的水平html导航菜单。在这个例子中,我们让ul元素和a元素向左浮动。该

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 使用CSS内联的水平html导航菜单。在这个例子中,我们让ul元素和a元素向左浮动。该相关的知识,希望对你有一定的参考价值。

<html>


  <head>


    <style>


      ul
      {
        
        float:left;
        
        width:100%;

        padding:0;

        margin:0;

        list-style-type:none;

      }


      a
      {
        
        float:left;

        width:6em;

        text-decoration:none;

        color:white;

        background-color:purple;

        padding:0.2em 0.6em;

        border-right:1px solid white;

      }


      a:hover 
      {
        
        background-color:#ff3300;
        
      }


      li
      {
        
        display:inline;
        
      }


</style>


  </head>



  <body>

  <ul>

    <li>
      <a href="#">Link one</a>
        
    </li>
    
    <li>
      <a href="#">Link two</a>
        
    </li>


    <li>
      <a href="#">Link three</a>
    </li>


    <li>
    
      <a href="#">Link four</a>
        
    </li>

  
</ul>


<p>
In the example above, we let the ul element and the a element float to the left.
The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.
The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.
</p>


</body>


</html>

以上是关于html 使用CSS内联的水平html导航菜单。在这个例子中,我们让ul元素和a元素向左浮动。该的主要内容,如果未能解决你的问题,请参考以下文章

css中导航栏子菜单横向下拉改为水平下拉

web水平菜单导航

水平导航-js二级菜单方法一

CSS水平菜单:显示:内联和块?让链接覆盖整个LI?

中间带徽标的水平导航

html 水平导航菜单和下拉菜单