Div 的导航栏

Question

我想用 Divs 制作一个导航栏，但我不知道如何并排放置链接。有没有人愿意帮我and/or解释一下？添加填充词，因为它不会让我 post。我推荐他使用他选择的用途，让它待售。但是没有必要渴望他们。因为我不应该放弃我其余的乐趣。在或拉丁工作出色。这只是原子的问题，而且威严。不管他们有没有被我们对待，说不定他可能都看到了，好像问题vim没有。不管他是不是被图书馆员迫害，二和他会坐下来为他的国家，二和向人民发声。

他们被这些快乐所召唤；他看到指控已经交付给他。他也不说自己松了，但有些皇子是有权利行使的。权利，因为它是永恒的，不会像女仆的权利和国家的权利那样用义务腐蚀权利。 Sea 和古人的 Apeirians，以及 Tritans 得出的结论。

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;
}

Answer 1

添加这个

.navigation div
{
    display:inline;
}

Fiddle: https://jsfiddle.net/peb55sza/

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

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

Div 的导航栏

Nav Bar with Div

html

css

navigation

nav