带 Div 的导航栏答案

【问题标题】：Nav Bar with Div带 Div 的导航栏
【发布时间】：2015-10-14 19:38:24
【问题描述】：

我想用 Divs 制作一个导航栏，但我不知道如何将链接并排放置。有人愿意帮助和/或向我解释吗？添加填充词，因为它不会让我发帖。 Lorem Ipsum ad usu quem delectus，sea stet sale id。 Nulla nostrud appetere ea sed。 Ne nam accumsan verterem, ex mea cetero voluptaria。在 vel latine 中的工作非常出色。 Justo atomorum est cu，bonorum maiestatis ea 坐。他的 nobis tractatos, sea ut possit vidisse, quodsi quaestio vim ne。 An eum liber persecuti, duo patrioque consetetur ad, duo et sonet populo。

Eligendi appellantur voluptatibus 有 ea, eam eu putent constituto efficiantur。 Vidit accusam liberavisse ad eum。 Ne vel dicit soluta, exerci aliquam principes ius ea。 Ius ut illum aeterno, ius officiis corrumpit ne, ut ancillae patrioque ius。 Sea et maiorum apeirian, tritani concludaturque eam ad。

HTML

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My website</title>
<link rel="stylesheet" type="text/css" href="../Web Design 3/stylesheet.css" />
</head>

<body>
    <div class="headbar">
        <div class="navigation">
            <div class="Home"><a href="#">Home</a></div>
            <div class="About"><a href="#">About</a></div>
            <div class="Products"><a href="#">Products</a></div>
            <div class="Contact"><a href="#">Contact</a></div>
        </div>
        <div class="logo">

        </div>
    </div>
</body>
</html>

CSS

@charset "UTF-8";
/* Stylesheet */

* {
    padding: 0px;
    margin: 0px;
}

.headbar {
    width: 100%;
    height: 75px;
    background: black;
    opacity: 0.5;
}

.navigation {
    float:right;
    height: 50px;
    width: 500px;
    top: 6.5px;
}

.Home {
    height: 50px;
}

【问题讨论】：

所以你想要一个导航栏在一行中有一个链接？

标签： html css navigation nav

【解决方案1】：

添加这个

.navigation div
{
    display:inline;
}

小提琴：https://jsfiddle.net/peb55sza/

【讨论】：

【解决方案2】：

如果您想要一个简单的导航栏，请使用此代码。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My website</title>
<style>
    @charset "UTF-8";
/* Stylesheet */

* {
    padding: 0px;
    margin: 0px;
}

.headbar {
    width: 100%;
    height: 75px;
    background: black;
    opacity: 0.5;
}

.navigation {
    float:right;
    height: 75px;
    line-height:75px;
    width: 500px;
}

.navigation div { float:left;display:block; width:15%;height:50px;}
.navigation div a {color:#fff;display:block;}
</style>
</head>

<body>
    <div class="headbar">
        <div class="navigation">
            <div class="Home"><a href="#">Home</a></div>
            <div class="About"><a href="#">About</a></div>
            <div class="Products"><a href="#">Products</a></div>
            <div class="Contact"><a href="#">Contact</a></div>
        </div>
        <div class="logo">

        </div>
    </div>
</body>
</html>

我刚刚更新了您的代码..复制并粘贴它会起作用..如果您有更多问题，请告诉我..请记住，它只是基本结构..希望我能提供帮助。

【讨论】：

谢谢你 :) 你俩都醒了