Question

我正在尝试在左侧创建一个带Logo的标题，在中间创建5个链接的菜单，然后在屏幕右侧创建一个登录/ Register，如下所示： -

Logo     Menu 1    Menu 2    Menu 3    Menu 4    Menu 5        Log In / Register

我可以将徽标和菜单放在一起，但登录/注册位于下面一行。

我正在使用Div而不是表格。

body{
    	margin:0%;
	    background:#FFC;
	    background-size:cover; 
    }

    .header{
	    background:#000;
    }

    .logo{
	    float:left;
	    padding-right:5%;
	    margin-left:10%;
	    height:100;
    }

    /*basket*/
    .basketTray{
	    width:40%;
	    color:white;
	    padding-top:24;
	    padding-bottom:20;
	    width:40%;
    }

    /*menu*/
    .menu{
	    padding-top:24;
	    padding-bottom:20;
	    width:40%;
	    margin-left:15%;
     }

    .menu li{
	    display: inline;
	    padding-right: 25px;
	    font-size: 1.3em;	
    }

    a{
	    text-decoration:none;
	    color:white;
    }

<header class="header">
    	<div class="Logo"><img src="images/logo.jpg" alt="Company Logo" height="100"></div>
        <!--navigation menu-->
 		<div class="menu">
    		<ol>
                <li><a href="index.php">Home</a> </li>
                <li><a href="bags.php">Bags</a></li>
                <li><a href="boxes.php">Boxes</a></li>
                <li><a href="ingredients.php">Ingredients</a></li>
                <li><a href="login.php">Log In</a></li>
          	</ol>
		</div>
        <div class="basketTray">
            Log In| Register
        </div>
    </header>

Answer 1

将标题（不需要类，可能是一个唯一的元素）放置为表格单元格。

然后将div作为表格单元格放置：

header {
    display: table;
    width: 100%;
}
header>div {
    display: table-cell;
}
header .menu ol li {
    display: inline;
}

DEMO

Answer 2

您必须将display:inline-block设置为菜单，将div设置为“登录”

你的CSS中有一些错误，这里是fiddle。

body{
    margin:0%;
    background:#FFC;
    background-size:cover; 
}

.header{
    background:#000;
}

.Logo{
    float:left;
    width:20%
    padding-right:5%;
}

/*basket*/
.basketTray{
    display:inline-block;
    color:white;
    padding-top:24px;
    padding-bottom:20px;
    width:40%;
}

/*menu*/
.menu{
    padding-top:24;
    padding-bottom:20;
    width:40%;
    display:inline-block;
 }

.menu li{
    display: inline;
    padding-right: 25px;
    font-size: 1.3em;   
}

a{
    text-decoration:none;
    color:white;
}

Answer 3

    `<HTML>
<head>
    <title>The Tao Of Chocolate</title>
<style>

body{
    margin:0%;
    background:#FFC;
    background-size:cover; 
}

.header{
    background:#000;
      height: 103px;
}

.logo{
    float:left;
    padding-right:5%;
    margin-left:10%;
    height:100;
}

/*basket*/
.basketTray{
     /* width: 40%; */
  color: white;
  padding-top: 22px;
  padding-bottom: 20;
  /* width: 40%; */
  float: left;
}

/*menu*/
.menu{
    padding-top:24;
    padding-bottom:20;
    width:40%;
    margin-left:15%;
    float: left;
 }

.menu li{
    display: inline;
    padding-right: 25px;
    font-size: 1.3em;   
}

a{
    text-decoration:none;
    color:white;
}
</style>
</head>


<body>
    <header class="header">
    <div class="Logo"><img src="images/logo.jpg" alt="Company Logo" height="100"></div>
    <!--navigation menu-->
    <div class="menu">
        <ol>
            <li><a href="index.php">Home</a> </li>
            <li><a href="bags.php">Bags</a></li>
            <li><a href="boxes.php">Boxes</a></li>
            <li><a href="ingredients.php">Ingredients</a></li>
            <li><a href="login.php">Log In</a></li>
        </ol>
    </div>
    <div class="basketTray">
    <ul>
    <li>
        Log In| Register
   </li>
   </ul>
    </div>
</header>



</html>'

Try this code

Answer 4

你只需要和你的CSS一起工作。首先介绍float：左边菜单类和篮子托盘类。然后引入一个div，其类清除float属性，如

.clear{
        clear: both;    
    }

并根据你的填充和宽度做一些工作，你的工作就完成了。

body{
        margin:0%;
        background:#FFC;
        background-size:cover; 
    }

    .header{
        background:#000;
    }

    .logo{
        float:left;
        height:100;
    }

    /*basket*/
    .basketTray{

        color:white;
        padding-top:24;
        padding-bottom:20;
        float:left;
    }

    /*menu*/
    .menu{
        padding-top:24;
        padding-bottom:20;
        margin-left:15%;
        float:left;
     }

    .menu li{
        display: inline;
        padding-right: 25px;
        font-size: 1.3em;   
    }

    a{
        text-decoration:none;
        color:white;
    }
    .clear{
        clear: both;    
    }


<header class="header">
        <div class="Logo"><img src="images/logo.jpg" alt="Company Logo" height="100"></div>
        <!--navigation menu-->
        <div class="menu">
            <ol>
                <li><a href="index.php">Home</a> </li>
                <li><a href="bags.php">Bags</a></li>
                <li><a href="boxes.php">Boxes</a></li>
                <li><a href="ingredients.php">Ingredients</a></li>
                <li><a href="login.php">Log In</a></li>
            </ol>
        </div>
        <div class="basketTray">
            Log In| Register
        </div>
        <div class="clear"></div>
    </header>

Answer 5

试试这个

body{
    margin:0%;
    background:#FFC;
    background-size:cover; 
}

.header{
    background:#000;
    width=100%;
}

.logo img{
    float:left;
   height:80px;
   width:200px;
}

/*basket*/
.basketTray p{
    float:right;

    color:green;

}

.basketTray {
    float:right;

    color:green;

}

/*menu*/
.menu{

    padding:24;

    width:40%;
    margin-left:31%;
 }

.menu li{
    display: inline;
    padding-right: 25px;
    font-size: 1.3em;   
}

a{
    text-decoration:none;
    color:white;
}



<header class="header">

    <div class="Logo"><img src="images/logo.jpg" alt="Company Logo" ></div>
      <div class="basketTray">
       <p> Log In| Register</p>
    </div>
    <!--navigation menu-->
    <div class="menu">
        <ol>
            <li><a href="index.php">Home</a> </li>
            <li><a href="bags.php">Bags</a></li>
            <li><a href="boxes.php">Boxes</a></li>
            <li><a href="ingredients.php">Ingredients</a></li>
            <li><a href="login.php">Log In</a></li>
        </ol>
    </div>

</header>

在页面上的同一行显示项目

5 个答案: