内联块不能水平渲染UL Li元素
内联块不能水平渲染UL Li元素，是因为UL和LI元素默认的CSS样式中，LI元素是作为块级元素（block）显示的，而不是内联元素（inline）。
如果需要将UL和LI元素水平渲染，可以通过CSS样式来实现。可以将LI元素的CSS样式设置为内联元素（inline）或者内联块元素（inline-block），并将LI元素的CSS样式中的float属性设置为left。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head><title>水平渲染UL和LI元素</title><style>
li {
display: inline-block;
float: left;
}
</style>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
</html>在这个示例中，我们将LI元素的CSS样式设置为内联块元素（inline-block），并将LI元素的CSS样式中的float属性设置为left，这样就可以将UL和LI元素水平渲染了。
相关·内容
4回答
在水平对齐列表项时，是否有float: left或display: inline之外的最佳选择？就我个人而言，我不喜欢float，但这可能更多的是一种情感上的东西，而不是合乎逻辑的事情。
浏览 2提问于2012-01-23得票数 18
1回答
假设：#nav {} display: inline;/* make the LI's stack horizontally*/
display: block;}<ul id="nav">
<li</e
浏览 1提问于2014-12-10得票数 2
回答已采纳
从这里的所有问题中，我假设大多数人希望他们的div(或lis或其他任何东西)填充水平空间。我想让它们只有我需要的时间。在这里，它们填充水平空间：
<div id="cen
浏览 2提问于2013-07-21得票数 2
回答已采纳
2回答
我无法水平对齐内联块元素.根据我所发现的，内联块元素中有一些基线对齐，但我无法理解如何对齐。如果我使用“垂直对齐:顶部”，它是有效的。我有以下疑问：
在上一步之后将ul标记为'display : inline‘时，它将对齐。但不能用“显示:<em
浏览 1提问于2017-02-09得票数 3
我继承了一些在表单中使用水平列表的代码： <li>...</li></ul><ul>
<li ng-repeat="item
浏览 1提问于2015-06-19得票数 1
4回答
在和标签之间嵌套一个标签是否足够： <a href="somewhere.html"> </a> <li>Option 2<li><ul>
谢谢!
浏览 0提问于2013-05-23得票数 1
回答已采纳
2回答
CSS子菜单对齐问题
、、、
当在背景中设置彩色条时，我能让它显示出来的唯一方法是删除我最初在'.primary ul li{}‘选择器中的'float:left;’。
浏览 3提问于2012-10-18得票数 0
回答已采纳
它们都是内联元素。这意味着“正式”的边距、填充、宽度和高度属性应该被忽略(实际上并非如此)。如果我要正确地设置按钮的高度，我会编写类似display:block的代码，然后定义高度。但是考虑到块级元素会意外地扩展，所以我最好将它的宽度设置为某个固定值。问题是我不知道它的宽度，因为它可以在按钮的文本上动态定义。
另一个场景:我希望通过<ul>和<li>创建一个菜单。我想让它水平对齐，将一些项目分组到左侧，并将一些项目拉伸到右侧。<ul
浏览 6提问于2009-01-02得票数 1
回答已采纳
2回答
我有一个UL，在这个UL里面，我有一个在css中设置为200 in宽的图像。然而，当它在网页上呈现时，在图像的右边有一个额外的4px。Chrome的检查元素显示，由于某种原因，UL本身是204 UL。我可以通过将UL设置为width:200 do来修复这个问题，但是这在长期内不起作用，因为我需要向图像中添加填充，如果这样做，图像就会被偏移。
浏览 2提问于2014-10-29得票数 1
回答已采纳
4回答
子菜单垂直对齐
、、
然而，我改变这个菜单是为了使它中心，现在它不是垂直显示，而是水平显示。这是我的密码：
height: 30px; margin:0; list-style-type:none; } display: inline-block; vertical-align:30px
#menu li a
浏览 6提问于2015-10-19得票数 1
回答已采纳
即，注意ul.navbar li a中填充的顶部和底部代码。它没有效果。另一种选择是什么？请给我建议。 font-size: 90%; }
margin: autoli a:hover { }&l
浏览 9提问于2016-12-27得票数 0
回答已采纳
html代码： <ul class="navigation"> </div>.navigation { list-style: none;
border-right: 1px solid
浏览 2提问于2013-02-06得票数 1
回答已采纳
4回答
我有一个HTML文档，我想水平地显示一个简单的列表。关于如何做到这一点，有大量的例子，但是我的列表不会水平显示：<div id="main_menu"> <li><a href="#1">Link 1</a></li>
<li><a href="#2">Link
浏览 7提问于2015-07-27得票数 0
回答已采纳
是否有人使用JQuery 1.9创建水平菜单？更新<ul id="nav"> <li><a href="#">Profile</a>
<ul>">Salzburg<&#
浏览 4提问于2012-12-21得票数 1
回答已采纳
2回答
我试图理解为什么在下面的代码中，子<li>不将填充设置为15‘t的父<ul>移动。 font-size: 14px; padding: 15px;<div class="box"> <li class="box__item">A</<
浏览 0提问于2017-04-13得票数 1
回答已采纳
但是在Internet中，它是水平打开的。我试过摆弄显示器，但仍然找不出问题所在。我应该指出，代码是为了响应浏览器的大小而编写的。} display: inline-block;} display: block;.nav ul li:hover>ul {}
浏览 0提问于2018-10-10得票数 0
回答已采纳
2回答
因此，基本上，我有一个水平菜单，使用用CSS样式的ul和li元素，其中对于ul有一个固定的高度属性，但是由于li元素的数量太多，它们溢出到多行...since中，ul的高度是固定的，li元素出现在下一行中，但是它们在ul...so的‘块’之外，任何其他的html内容都会开始显示与第2行的li元素的内联吗？
浏览 3提问于2011-03-01得票数 0
1回答
我需要一个元素的垂直和水平的中心，元素不能有任何固定的维度。元素的内容不能是affected...meaning -一些元素将是文本-左对齐，其他中心，它们可能是图像，等等。以下是我目前所在的位置：但是我现在需要做的是竖直地把蓝色块中间。
蓝色块不能有任何固定的尺寸，尽管红色块可以。table;
浏览 2提问于2011-11-30得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
