如何在HTML菜单栏的左侧添加文本

Question

I'm new to HTML and CSS.I want to add text/image from the left side of the menu bar.how to do it?found many other ways but couldn't match with the code I got. 我是HTML和CSS的新手，我想从菜单栏的左侧添加文本/图像。如何做？找到了许多其他方法，但与我得到的代码不匹配。 this is the code I used 这是我使用的代码

  <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 我想在哪里显示文字

Answer 1

 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>

Answer 2

  p { display: inline-block; 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%;">

如何在HTML菜单栏的左侧添加文本

问题描述

2 个解决方案

解决方案1
0 2016-09-21 15:11:13

解决方案2
0 已采纳 2016-09-21 15:16:59

如何在HTML菜单栏的左侧添加文本

问题描述

2 个解决方案

解决方案1 0 2016-09-21 15:11:13

解决方案2 0 已采纳 2016-09-21 15:16:59

解决方案1
0 2016-09-21 15:11:13

解决方案2
0 已采纳 2016-09-21 15:16:59