如何设置dl标签的样式,即dt和dd在同一列中,并且两者结合在一起

时间:2013-07-15 14:06:16

标签: html

我想尝试这样的事情 HOME |联系|博客 回到家|让我们知道|关注我们的更新

意味着回到家是在HOME下面的jst然后边界然后让我们知道我们也像一个柱子 我的代码是 HTML:

<dl class="dl">

  <dt class="nav"><a href=""><b>HOME</b></a></dt>
        <dd class="nav1">Back to home</dd>


  <dt class="nav"><a href=""><b>PRODUCTS</b></a></dt>
       <dd class="nav1">What we have for you</dd>

  <dt class="nav"><a href=""><b>SERVICES</b></a></dt>
       <dd class="nav1">Things we do</dd>

  <dt class="nav"><a href=""><b>BLOG</b></a></dt>
       <dd class="nav1">Follow our updates</dd>

  <dt class="nav"><a href=""><b>CONTACT</b></a></dt>
      <dd class="nav1">Ways to reach us</dd>

</dl>

css:

#header .dl{
    text-decoration:none;
    height:50px;
    width:60%;
    float:right;
    list-style:none;
    margin-right:10px;
    margin-top:40px;

    }
#header .nav{

    display:inline;
    color:#666;
    font-family:Tahoma, Geneva, sans-serif;
    text-decoration:none;
    margin-left:10px;
    font-size:15px;
    border-right:1px dotted #CCCCCC;
    float:left;
    padding-right:15px;
    padding-left:20px;


    }
#header .nav a{
    color:#009;
    text-decoration:none;
    }
#header .nav a:hover{
    color:#09f;
    }
#header .nav1{


    clear:both;
    }

帮帮我

1 个答案:

答案 0 :(得分:0)

如果您正在制作菜单,建议使用ul

查看我的jsFiddle