无法在同一行显示列表和h1标记

Question

无法在同一行显示列表和h1标记

我正在尝试制作一个带有菜单列表和徽标的网页.在下面的代码中,每当我尝试将它们并排放置时,其中一个向下移动到页面上.我想要列表和标题并排.这是代码,

<!DOCTYPE html>
<html dir="ltr" lang="en-UK"> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Fahad | Just another web designer</title>
        <!--Styling Starts-->
    </script> 
       <style type="text/css"> 
            <link href='http://fonts.googleapis.com/css?family=Chewy&v1' rel='stylesheet'               type='text/css'>
            h1 { font-family: 'Chewy', arial, serif;
             }
             h1 {
                 font-size:45px; 
                 padding-top:70px;
                 padding-left:350px;
             }
            .menu 
            {
                padding:0;
                margin-left:0;  
                height:200px;
                width:300px;
            }
              .menu ul
             {
                padding-left:200px;
                padding-top:45px;
                font:Verdana, Geneva, sans-serif;
                list-style-type:none;
                text-decoration:none;
                color:#666;
              }
              .container
              {
                color:#666; 
              }
              a:link
              {
                 color:#666;
              }
              a:hover
              {
                 color:#333;
              }
              a:active
              {
                color:#666;
              }

     </style>

    </head>
    <body>
        <div class="container">
       <h1>Fahad</h1>  
            <div class="menu">

            <ul>
                <li><a>Home</a> </li>    
                <li><a>Blog</a></li>
                <li><a>About</a></li>
                <li><a>Contact</a></li> 

            </ul>

            </div><!--logo div ends-->

        </div><!--Container Div ends-->
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

请帮帮我.谢谢.

Answer 1

Šim*_*das 6

要使两个(或更多)兄弟元素出现在一行中,您可以使用该inline-block值.只需应用于display:inline-block这些元素.

现场演示: http ://jsfiddle.net/DcS4u/

归档时间：	14 年，5 月前
查看次数：	5030 次
最近记录：	13 年，11 月前