gpt4 book ai didi

html - 显示 :inline not working

转载 作者:技术小花猫 更新时间:2023-10-29 12:18:03 27 4
gpt4 key购买 nike

我对 html 和 css 还很陌生。

我学习了基础知识和一些高级技术,但长期以来我一直对列表有疑问,想知道如何解决我的问题。

这是个主意。

我正在开一家网上商店,但我想避免使用不同的 id 定位每一个图像、文本、链接。

我有这个想法,我会把我的 li 放在一个 div 中,这样,我列表中的所有内容都会卡在这个框中,创建一个类来正确定位我的文本、链接、图像,使用 display:inline 等等,我可以仅使用一个类来创建整个产品页面。

问题是 display:inline 不工作。

如果有人能帮助我解决这个问题,我将不胜感激。

这是一个不好的例子,但是,你明白了原理。

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

最佳答案

display:inline 非常有限,不允许向其添加任何 block 级 样式。您最好使用 display:inline-block 或使用 float:left。请记住,如果您使用 float ,则需要将父元素的溢出设置为 overflow:auto(对 IE < 8 使用 visible),这应该有效。首先使用内联 block 。

关于html - 显示 :inline not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11963780/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com