Question

如何获取Dial食物标题正下方的菜单栏并删除下面代码中显示的下划线：

<body>
    <div id="header">
        <h1 style="color: #CC6600; height: 100px; width: auto;">
            Dial food</h1>
    </div>
    <div id="Menu" style="background-color: #330000; font-size: 20px; height: 25px; width:auto;
        word-spacing: 24px; position:absolute">
        <a href="">About </a>
        <a href="">Restaurants </a>
        <a href="">Contact </a>
        <a href="">Support</a> 
    </div>
</body>

你可以帮助我获得这种对齐方式，链接文本只能对齐吗？

Answer 1

将<h1>高度更改为15px以使菜单栏显示。（或者你喜欢的价值）

<h1 style="color: #CC6600; height: 15px; width: auto;">

使用以下CSS删除下划线。

#Menu a {
    text-decoration:none;
}

http://jsfiddle.net/6bxVr/

Answer 2

<强> HTML
拨打食物

   <ul>
        <li>  <a href="">About </a> </li>
         <li><a href="">Restaurants </a></li>
         <li><a href="">Contact </a></li>
         <li><a href="">Support</a> </li>
    </ul>

<强> CSS

    .header
    {
    color: #CC6600; 
        height:20px;
        width: auto;    
        margin:10px;
    }


    ul
    {
        list-style:none;
    }
    ul li
    {
        float:left;
        padding:10px;
        background-color: #330000; 
        word-spacing: 24px;
        font-size: 20px;
        height: 25px;
        width:auto;


    }
    li a
    {


  text-decoration:none;
}

小提琴 Demo Here

Update fiddle of Yours

希望这有帮助

快乐的编码.. !!

如何对齐以下代码

2 个答案: