个人中心
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/

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

编辑:如果你想要整个宽度的黑色背景，将topnav和h1放在一个新的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
文章推荐： linux - 像 ncftp 这样的 Bash 选项卡补全？
文章推荐： python - 以多级树的形式构建字典
文章推荐： python - 如何最多处理列表中一定数量的元素？
文章推荐： java - Libgdx 矩形数组