gpt4 book ai didi

html - 移动我的导航栏?

转载 作者:太空宇宙 更新时间:2023-11-04 11:06:40 24 4
gpt4 key购买 nike

我需要将我的顶部水平导航栏一直移动到显示“Best TV Ever”标题旁边的右侧,我已将其 float 到右侧,现在它必须向上移动到页面顶部。

我该怎么做?

这是 jsfiddle:https://jsfiddle.net/qkLgqmfh/

以及代码。

h1{
background-color: black;
background-image: url(logo.png);
background-repeat: no-repeat;
font-family: Peralta;
color: white;
height: 100px;
padding-top: 25px;
padding-left: 150px;}

h2{
font-family: Peralta;
text-align: center;
height: 25px;
background-color: white;
padding-top: 0;
height: 50px;
}

p{
border-bottom: 1px solid black;
padding-bottom: 3em;
display: block;
overflow: hidden;
height:130px;
}

img{
float: left;

margin-right: 1em;
width: 150px;
height: 100px;
padding-left: 10px;
border-radius: 20px;}



ul li {
display: inline-block;
float: right;
padding-top: 0;
}

.topnav ul li a:link{
text-decoration: none;
color: black;
background-color: white;
border-radius: 50%;
margin: 15px;}

<body>
<div class="wrapper">


<div id="masthead">
<h1>Best TV Ever</h1>
</div>


[insert menu toggle here]
[insert menu checkbox here]

<div class="topnav">
<ul>
<li><a href="#">50s</a></li>
<li><a href="#">60s</a></li>
<li><a href="#">70s</a></li>
<li><a href="#">80s</a></li>
<li><a href="#">90s</a></li>
</ul>
</div>

我已经盯着这个电脑屏幕看了 6 个小时了,感觉我的思绪快要死了。我敢肯定这很简单......但对于我的生活我无法弄清楚!

最佳答案

我看到您的 float: right;li 而不是 .topnav 上。这是您的主要问题。

我改变了它并删除了很多集群,这就是我得到的:https://jsfiddle.net/qkLgqmfh/3/

我认为这就是您想要实现的目标。

编辑:如果你想要整个宽度的黑色背景,将topnavh1放在一个新的div中 并设置 background-color: black;。由于 div 只包含 float 元素,它将以 0 高度和宽度呈现,因此您还需要设置 overflow: hidden;(除非您想给它一个特定的高度)。

关于链接的大小,你可以改变font-size

看看:https://jsfiddle.net/qkLgqmfh/5/

关于html - 移动我的导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33922837/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com