Question

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

<!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>

请帮帮我。谢谢。

Answer 1

要使两个（或更多）兄弟元素出现在一行中，您可以使用inline-block值。只需将display:inline-block应用于这些元素。

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

Answer 2

默认情况下，H1和LI是块元素。如果您希望它们与另一个元素位于同一行，则必须将其更改为内联。

H1, LI
{
  display: inline;
}

但是，这可能会给你带来更多弊大于利您应该在同一行上查看floating块元素。

已更新：

同样，你可以让3个容器浮动：

<div class="floater-parent clearfix">
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>

.floater-parent DIV
{
   width: 150px;
   float: left;
}

Answer 3

尝试将float: left添加到h1。

Answer 4

您需要先将h1和左侧菜单浮动

h1, .menu {float:left;}

然后为了确保菜单后面的任何内容都不显示在同一行，你需要清除下一个兄弟元素。

example: #pageContent {clear:both;} // technically this could be clear:left.

<body>
  <h1>My Page</h1>
  <div class="menu">link1, link2</div>
  <div id="pageContent">
    Contents of my page
  </div>
</body>

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

4 个答案: