Question

我想用Div制作导航栏，但我不知道如何将链接并排放置。有人愿意帮助和/或向我解释吗？添加填充词，因为它不会让我发布。 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 labores辉煌。 Justo atomorum est cu，bonorum maiestatis ea sit。他的nobis tractatos，sea ut possit vidisse，quodsi quaestio vim ne。一位自由的人，一对二人组，一对二人组，一对二人组，一名人民共和国人。“

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

Answer 1

添加此

HAVING

小提琴：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的导航栏

2 个答案: