2016-09-14 19 views
1

navBARの下にテキストを表示しようとしていますが、navBARボタンのすぐ隣に表示されます。私はCSSでいくつかのマージンプロパティを試しましたが、何も動作していないようです。navBARの隣にテキストが貼り付けられました

ありがとうございます!

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

答えて

1

あなたのCSSは、間違ったクラス.narBARがあります

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

はまた、あなたのコード内のエラーがあります。 <head><img>を含めることはできませんので<body><img src="img/logo.png">を入れてください。

<body background="untitled.png">の代わりにcssの背景を使用してください。たとえば

body{ 
    background-image: url(untitled.png); 
} 

あなたのコードが正常に動作する必要がありますが、あなたが原因の画像に問題を説明し得ることができますので、このhttps://jsfiddle.net/kdmvxrmx/

よう .navBAR

何かのためにoverflow: hiddenを設定しました

関連する問題