如何從HTML菜單欄的左側添加文本

我是HTML和CSS的新手。我想從菜單欄的左側添加文本/圖像。要做到這一點嗎？發現很多其他方式，但不能與我得到的代碼相匹配。這是我用如何從HTML菜單欄的左側添加文本

<html> 
 
<title>TEST</title> 
 
<link rel="icon" type="image/png" href="logo1.png"/> 
 
<h1 ><font color="white">TEST</font></h1> 
 
<head> 
 
<style> 
 
    ul { 
 
    list-style-type: none; 
 
    width:75%;  
 
    margin: 0 auto; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #339cff; 
 
    } 
 
    li { 
 
     float: left; 
 
    } 
 
    li a { 
 
     display: block; 
 
     color: white; 
 
     text-align: center; 
 
     padding: 14px 16px; 
 
     text-decoration: none; 
 
    } 
 
    li a:hover:not(.active) { 
 
     background-color: #345cff; 
 
    } 
 
    .active { 
 
    background-color: #ff9333; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 
<ul> 
 
<li><a class="active" href="#home">Home</a></li> 
 
<li><a href="#news">News</a></li> 
 
<li><a href="#contact">ontact</a></li> 
 
</ul> 
 
</body> 
 

 

 
<body background="background.jpg"> 
 
<br> 
 

 
    <h5 style="position: fixed; bottom: 0; width:100%;text-align: center"><font color="yellow"><strong> Copyright © TEST 2016 All Rights Reserved.</strong></font></h5> 
 
<img src="banner.jpg" style="width:100%;"> 
 
</body> 
 
</html>

WHERE I WANT TO SHOW THE TEXT

來源

2016-09-21 Manjula

p { 
 
    \t display: inline-block; 
 
    \t float: left; 
 
} 
 
    ul { 
 
    list-style-type: none; 
 
    width:75%;  
 
    margin: 0 auto; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #339cff; 
 
    display: inline-block; 
 
    float: left; 
 
    } 
 
    li { 
 
     float: left; 
 
    } 
 
    li a { 
 
     display: block; 
 
     color: white; 
 
     text-align: center; 
 
     padding: 14px 16px; 
 
     text-decoration: none; 
 
    } 
 
    li a:hover:not(.active) { 
 
     background-color: #345cff; 
 
    } 
 
    .active { 
 
    background-color: #ff9333; 
 
    }

<p>Hello World!</p> 
 
<ul> 
 
<li><a class="active" href="#home">Home</a></li> 
 
<li><a href="#news">News</a></li> 
 
<li><a href="#contact">ontact</a></li> 
 
</ul> 
 
</body> 
 

 

 
<body background="background.jpg"> 
 
<br> 
 

 
    <h5 style="position: fixed; bottom: 0; width:100%;text-align: center"><font color="yellow"><strong> Copyright © TEST 2016 All Rights Reserved.</strong></font></h5> 
 
<img src="banner.jpg" style="width:100%;">

代碼210

來源

2016-09-21 15:16:59

此方法工作。但如何與其餘代碼結合？ – Manjula

我不明白！你是什麼意思？ –

你的代碼完美地工作在snippet中，你得到了我想要做的事情。當它應用於其他代碼時，它會造成混亂。我應該如何在代碼上面添加上面和底部，以正常工作，就像它在代碼段上工作 – Manjula

ul { 
 
    list-style-type: none; 
 
    width:75%;  
 
    margin: 0 auto; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #339cff; 
 
    display: inline-block; 
 
    float: left; 
 
    } 
 
    li { 
 
     float: left; 
 
    } 
 
    li a { 
 
     display: block; 
 
     color: white; 
 
     text-align: center; 
 
     padding: 14px 16px; 
 
     text-decoration: none; 
 
    } 
 
    li a:hover:not(.active) { 
 
     background-color: #345cff; 
 
    } 
 
    .active { 
 
    background-color: #ff9333; 
 
    }

<body> 
 
<ul> 
 
<li><a class="active" href="#home">Home</a></li> 
 
<li><a href="#news">News</a></li> 
 
<li><a href="#contact">ontact</a></li> 
 
</ul> 
 
</body> 
 

 

 
<body background="background.jpg"> 
 
<br> 
 

 
    <h5 style="position: fixed; bottom: 0; width:100%;text-align: center"><font color="yellow"><strong> Copyright © TEST 2016 All Rights Reserved.</strong></font></h5> 
 
<img src="banner.jpg" style="width:100%;"> 
 
</body>

來源

2016-09-21 15:11:13

如何從HTML菜單欄的左側添加文本

回答

相關問題