html - 无法浮动导航栏
问题描述
我想将我的浮动nav-bar到屏幕的右侧，但我不知道如何做到这一点。我试图玩弄该margin物业，但这只是中断。我知道这是一团糟，但我没有删除任何不必要的代码来解决我的问题。
代码下方。
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* font-family: 'Open Sans', sans-serif; */
* {
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
body {
overflow-x: hidden;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
img {
max-width: 100%;
height: auto;
}
.button {
display: inline-block;
font-size: 1.15rem;
text-decoration: none;
padding: 0.5em 1.3em;
border-width: 2px;
border-style: solid;
}
.container {
width: 95%;
margin: 0 auto;
}
/*Home Section*/
header {
text-align: center;
position: absolute;
margin: 1em;
}
.logo {
max-width: 180px;
max-height: 180px;
}
#nav-ul {
margin: 2em;
padding-top: 0.7em;
padding-bottom: 0.7em;
list-style-type: none;
}
.nav-item {
display: inline-block;
margin: 0em;
}
.nav-links {
font-weight: 900;
text-decoration: none;
font-size: 1rem;
padding: 0.3em;
color: white;
}
.nav-links:hover,
.nav-links:focus {
color: lightgray;
}
#home-section {
text-align: center;
width: 100vw;
background-image: url(imgs/home-section-background.jpg);
background-size: cover;
background-position: center;
padding: 10em 0;
}
.title {
color: white;
font-size: 2.5rem;
}
.button-green {
margin-top: 1.8em;
color: rgb(3, 204, 30);
border-color: rgb(12, 255, 45);
}
.button-green:hover,
.button-green:focus {
background-color: rgb(8, 163, 26);
}
/* About section */
#about-examples {
text-align: center;
}
.description-text {
background-color: rgb(68, 68, 68);
color: white;
padding: 3em;
width: 100vw;
margin-left: -2.5%;
outline: 2px solid rgb(12, 255, 45);
outline-offset: -2.1em;
position: relative;
}
.description-text p {
text-align: justify;
}
.description-text h1 {
font-size: 1.3em;
text-align: center;
margin-top: 0;
position: absolute;
top: 0.8em;
background-color: rgb(68, 68, 68);
color: rgb(12, 255, 45);
padding: 0 0.5em;
left: 50%;
transform: translateX(-50%);
}
/*Media quiries*/
@media (min-width: 60rem) {
.title {
font-size: 4rem;
}
.nav-links {
font-size: 2rem;
float: right;
}
.nav-item {
}
.button {
font-size: 2rem;
}
.logo {
float: left;
margin: 1em;
}
#nav-ul {
float: right;
}
.description-text {
font-size: 3em;
}
.description-text p {
font-size: 0.5em;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About Me</title>
<link href="ResponsiveWeb.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="imgs/logo.jpg" alt="company logo" class="logo" />
<ul id="nav-ul">
<li class="nav-item">
<a href="#home-section" class="nav-links">Home</a>
</li>
<li class="nav-item">
<a href="#about-examples" class="nav-links">About</a>
</li>
<li class="nav-item">
<a href="#contacts" class="nav-links">Contact</a>
</li>
</ul>
</header>
<!--Company name goes here-->
<section class="home" id="home-section">
<div class="containter">
<h1 class="title">Making proffesional design and development</h1>
<a href="#" class="button button-green">See our work</a>
</div>
</section>
<!--Company description goes here-->
<div class="container">
<section class="about-company" id="about-examples">
<div class="description-text">
<h1>What we do</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh sit
amet commodo nulla facilisi.
</p>
<p>
Nam eget sem sed sem rutrum efficitur. Nullam lorem nunc, porta et
faucibus semper, suscipit id mauris. Sed nisi eros, mollis at mollis
a, porta et sapien. Fusce blandit tempus justo. Aenean erat magna,
semper nec commodo quis, feugiat sit amet lacus. Vestibulum tempor
ornare fermentum. Vestibulum egestas imperdiet libero, sed egestas
purus varius a. Mauris consequat ligula ipsum, at faucibus lectus
blandit quis. Donec congue eros sed est sollicitudin, in ultricies
lorem consectetur. Maecenas suscipit tortor orci, id pellentesque
nisi maximus at. In laoreet turpis id tempor dapibus. Nunc facilisis
egestas ex et ullamcorper. Mauris nunc felis, porttitor nec porta
cursus, egestas vitae tellus. Ut commodo in metus eget blandit.
Maecenas vestibulum dictum neque, at dictum arcu lobortis nec. Donec
quis augue arcu.
</p>
</div>
</section>
</div>
<!--Work Example-->
<section class="work-example">
<h1>Example of our work</h1>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-01 Jeremy Bishop.jpg"
alt="Beautiful tree"
/>
<figcaption class="port-description">
<p>Photo by Jeremy Bishop</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img src="imgs/Portfolio-pic-02 Jay Mantri.jpg" alt="Fog over forest" />
<figcaption class="port-description">
<p>Photo by Jay Mantri</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-03 Riccardo Chiarini.jpg"
alt="Beautiful lake"
/>
<figcaption class="port-description">
<p>Photo by Riccardo Chiarini</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-04 redcharlie.jpg"
alt="Beautiful tree in forest"
/>
<figcaption class="port-description">
<p>Photo by redcharlie</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-05 Vincent van Zalinge.jpg"
alt="Bird on brnanch"
/>
<figcaption class="port-description">
<p>Photo by Vincent van Zalinge</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-06 eberhard grossgasteiger.jpg"
alt="Fog over mountains"
/>
<figcaption class="port-description">
<p>Photo by eberhard grossgasteiger</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
</section>
<footer id="contacts">
<p>Work hours: Mon-Fri 8:00 AM - 16:00 PM</p>
<br />
<p>You can contact us here:</p>
<br />
<ul class="contact-links">
<li class="contact-link"><a class="contact" href="#">A</a></li>
<li class="contact-link"><a class="contact" href="#">B</a></li>
<li class="contact-link"><a class="contact" href="#">C</a></li>
</ul>
</footer>
</body>
</html>解决方案
也许标题不够宽。在您的 CSS 中，您可以将标题的宽度设置为 100%。
header {
text-align: center;
position: absolute;
margin: 1em;
width: 100%;
}
推荐阅读
- java - 需要将char转为小写并在Java中替换
- html - 在不同高度的dom底部设置输入框
- mongodb - Mongo-Express 容器可以使用 TLS 连接到 MongoDB 吗？
- sql-server - 触发器未发生 T-SQL 存储过程更新
- javascript - 如何确保 TCP 服务器始终在 VM 上运行（谷歌云）
- c++ - 如何在for循环中创建自动迭代，它将为其分配指针而不是值
- powershell - Powershell - 试图获取批量用户的描述字段
- homebrew - 收到“没有这样的文件或目录”错误消息时如何从 brew 中删除 virtualbox
- terminal - Cloudflare 牧马人安装
- file-upload - Azure 逻辑应用：通过 http WebAPI 文件上传发送 PDF 文件时损坏