Dan*_*any 16 html css list unordered
我是html和css的新手.
我学习了基础知识和一些高级技术但是,我长期以来一直遇到列表问题,想知道如何解决我的问题.
这是个主意.
我正在网上商店,但我想避免使用不同的ID定位每个图像,文本,链接.
我有这个想法,我会把我的李放在一个div这样的方式,我的列表中的所有内容都会卡在这个盒子里,让一个类定位我的文本,链接,图像正确,使用显示:内联和et瞧,我可以仅使用一个类创建整个产品页面.
问题是显示:内联不起作用.
如果有人可以帮我解决这个问题,我将非常感激.
这是一个不好的例子,但是,你了解原理.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#nav_bar {margin:0px;padding:0px;list-style-type:none;text-align:center;}
.nav_button {background-color:purple;width:100px;height:50px;}
.nav_button:hover {background-color:pink;}
.nav_button li {display:inline;} /* Not working ?!? */
.nav_button a {position:relative;color:white;text-decoration:none;top:13px;}
</style>
</head>
<body>
<table style="width:600px;margin:0 auto;">
<tr>
<td>
<ul id="nav_bar">
<div class="nav_button"> <li> <a href="#">Home</a> </li> </div>
<div class="nav_button"> <li> <a href="#">Contact us</a> </li> </div>
<div class="nav_button"> <li> <a href="#">Shipping</a> </li> </div>
<div class="nav_button"> <li> <a href="#">About us</a> </li> </div>
</ul>
</td>
</tr>
</table>
</body>
</html>
mat*_*sko 30
display:inline非常有限,不允许添加任何块级样式.你最好不要使用display:inline-block或使用float:left.请记住,如果您使用浮点数,那么您需要将父元素的溢出设置为overflow:auto(对IE <8使用可见),这应该可行.首先使用内联块.