我想创建一个全宽导航，左侧是页面徽标，这是一个链接并链接回家。还有一个注册/登录和购物车li元素。
我想将100％的背景色也放在屏幕上。它们也需要内联。
使用HTML5标签你怎么能在语义上做到这一点。什么是元素的层次结构？
你将如何实现这一目标。
header{
width: 100%;
background-color: #000000;
margin: 0 ;
padding: 0;
}
header h1{
margin: 0;
padding: .5em 0;
color: black;
clear:both;
}
header li:nth-child(1){
float: left;
}
header li:nth-child(n+2){
text-align: right;
display: inline;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- the head section -->
<head>
<title>Willie's Fishing Supply</title>
<link rel="stylesheet" type="text/css"
href="<?php echo $app_path ?>main.css" />
</head>
<!-- the body section -->
<body>
<header>
<ul id="leftUpperNav">
<li>
<a href="<?php echo $app_path; ?>">
<h1>Willie's Fishing Supply</h1>
</a>
</li></ul>
<?php
// Check if user is logged in and
// display appropriate account links
$account_url = $app_path . 'account';
$logout_url = $account_url . '?action=logout';
if (isset($_SESSION['user'])) :
?>
<ul id="rightUpperNav">
<li>
<a href="<?php echo $account_url; ?>">My Account</a>
</li>
<li>
<a href="<?php echo $logout_url; ?>">Logout</a>
</li>
<?php else: ?>
<li>
<a href="<?php echo $account_url; ?>">Login/Register</a>
</li>
<?php endif; ?>
<li>
<a href="<?php echo $app_path . 'cart'; ?>">Cart</a>
</li>
</ul>
<nav>
<ul>
<h2>Categories</h2>
<!-- display links for all categories -->
<?php
require_once('model/database.php');
require_once('model/category_db.php');
$categories = get_categories();
foreach($categories as $category) :
$name = $category['categoryName'];
$id = $category['categoryID'];
$url = $app_path . 'catalog?category_id=' . $id;
?>
<li>
<a href="<?php echo $url; ?>">
<?php echo $name; ?>
</a>
</li>
<?php endforeach; ?>
<h2>Temp Link</h2>
<li>
<!-- These links are for testing only.
Remove them from a production application. -->
<a href="<?php echo $app_path; ?>admin">Admin</a>
</li>
</ul>
</nav>
</header>
<section id = "wrapper">
答案 0 :(得分：1)
你可以向左移动一些元素，向右移动一些元素来实现这一点。
<header class="global-header">
<div class="inner-w">
<a href="#" class="site-logo">
<img src="http://placehold.it/100x100" alt="" />
</a>
<nav class="account-nav">
<a href="#">login</a>
<a href="#">whatever</a>
</nav>
</div>
</header>
.global-header {
background: #f06;
padding: 1em;
overflow: hidden;
}
.global-header .inner-w {
max-width: 700px; /* or 960 or whatever */
margin-right: auto;
margin-left: auto;
}
.global-header .site-logo {
float: left;
}
.account-nav {
float: right;
}
.account-nav a {
display: inline-block;
vertical-align: middle;
border: 1px solid red;
}
这里是a jsFiddle（将来这是您开始的好地方 - 并向其他用户展示您迄今为止尝试过的内容）
答案 1 :(得分：0)
我不确定我完全理解你的问题。根据我的理解，您正在尝试为网页顶部创建一个导航栏，并且您希望它具有链接徽标和一些列表元素。
基于这个假设，我强烈建议您查看Bootstrap。 Bootstrap是Twitter制作的前端框架，用于制作优雅，响应迅速的Web项目。首先查看文档here。文档包括下面的示例，这是一个导航栏，其中包含您在导航栏中可能需要的任何内容。请注意，如果要使用Bootstrap组件，则需要将引导脚本添加到页面中。查看他们的"Getting Started" page了解更多信息。
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>