Question

我正在尝试查看navBAR下的文字，但它只是直接显示在navBAR按钮旁边。我在css中尝试了一些margin属性，但似乎没有任何效果。

提前致谢!!

<html>
<title>title</title>

<head>
    <img src="img/logo.png">
    <meta charset="uft-8">
    <link rel="stylesheet" href="css/style.css">
<style>
    .narBAR{margin:0 auto; width:1080px;}
    .navBAR ul {padding:0px;}
    .navBAR ul li {float:left;}
</style>
</head>

<body>
    <body background="untitled.png">
    <div class="navBAR">
    <ul>                                    
    <li><a href='file:///C:/Users/Amroo/Desktop/new%201.html#'><img src="img/home.png"></a></li>

    <ul>
    <li><a href='file:///C:/Users/Amroo/Desktop/libarary%20one.html'><img src="img/ourbooks.png"></a></li>
    <li><a href='#'><img src="img/books.png"></a></li>
    </ul>
    <li><a href='#'><img src="img/login.png"></a></li>
    <li><a href='#'><img src="img/contact.png"></a></li>
    </ul>
    </div>
    <div class="search">
    <form action="file:///C:/Users/Amroo/Desktop/new%201.html/search.php">
    <input type="text" name="search" placeholder="Search......"/>                                           
    <input type="submit" value="Search"/>                                   
    </form>
    </div>


    <h1>text</h1>

    <img src="blog/img/mars.jpeg"> 

    <h3>text</h3>       
    </body>

Answer 1

你的CSS有一个错误的班级.narBAR：

.narBAR{margin:0 auto; width:1080px;}

您的代码中也存在错误。您在<img>中无法<head>，因此<img src="img/logo.png">将<body>放入<body background="untitled.png">。

并使用css背景代替body{ background-image: url(untitled.png); } 例如：

overflow: hidden

虽然您的代码应该可以正常工作，但由于图片问题可能会出现问题，因此请为.navBAR设置dynamic

像这样https://jsfiddle.net/kdmvxrmx/

文本卡在navBAR旁边

1 个答案: