解决ul元素不能跟div同一行显示的办法

最新推荐文章于 2024-05-14 09:58:41 发布
最新推荐文章于 2024-05-14 09:58:41 发布
阅读量567 收藏 2
点赞数
文章标签： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiaohuizhuang6019/article/details/132789506
版权

现象如下：

html结构如下：

 

 可以看到div和ul是同级元素。

为什么这里ul换行了呢！

这里要敲黑板了！ 因为ul是块级元素！也就是独占一行，跟div一样。

如果需要ul跟div在同一行显示，则要求ul前面相邻的div元素设置浮动属性: float:left.

 

 

 果然给ul的相邻div加了float:left属性，问题解决！

kingtopest
关注
html div元素浮动,CSS实现元素浮动和清除浮动的方法
weixin_33417371的博客
06-10 1077
浮动基本介绍在标准文档流中元素分为2种，块级元素和行内元素，如果想让一些元素既要有块级元素的特点也同时保留行内元素特点，只能让这些元素脱离标准文档流即可。浮动可以让元素脱离标准文档流，可以实现让多个元素排在同一行，并且可以设置宽高度。其实浮动是通过float属性来实现的。float属性值说明表：属性值描述left设置元素向左浮动。right设置元素向右浮动。右浮动实践让我们进入右浮动的实践，实践内...
ul设置列表为一行2条的方法
12-13
float:left + 设置ul的宽度 + 设置li的宽度 1.其实设置ul的列表本来是一行一行的，当设置li的float为left的时候可以看见成为一行 2.比如ul的宽度为200px,为了实现一行2条，我们可以设置li的宽度为75px,由于float为left,二一行又只能放置2个li，所以第三个就被挤下去了。 如有不明白可以看360buy_nav文件夹将鼠标移到企业建站时可以看到效果
ul里面可以放div吗？
很酷的站长的博客
08-27 782
在HTML中，标签代表无序列表，可以用来展示项目列表。而标签则是div容器用于分组内容，提供独立于文档的CSS样式和JavaScript事件处理。那么，答案是肯定的，下面从多个方面进行详细阐述。
关于html中 ul li 中加入div（div位置随意设置）的问题
热门推荐
FREEDOM
10-09 1万+
无标题文档 #apDiv1 { position:relative; left:20px; top:42px; width:487px; height:639px; } #apDiv1 ul li { list-style-type: none; } .apDiv2 { /* li中的div要设置成绝对，这样，因为ul和li没有设置定位（绝对或相对，默认static
写出ul列表在同一行显示 的两种方法
liuhebahuang的博客
08-17 1万+
UL 显示同行两种方法 1.方法一：应用 float 浮动属性和 display：block；来做出 内容1 内容2 内容3 内容4 内容5 内容6 内容7 内容8
ul弹性怎么一行显示_弹性盒模型
weixin_39829073的博客
12-06 470
一、CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 二、浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在数字后面的 ...
在一个div元素下把两个ul元素平行放置
05-20
可以使用CSS的`display: flex`属性来实现两个ul元素在同一行显示。具体操作如下： HTML代码： ```html <div class="container"> <ul class="list1"> 列表1-1 列表1-2 列表1-3 </ul> <ul class="list2"> ...
12个div逐个显示效果
12-09
这些div被设置为浮动元素，以便于在同一行内排列。 此外，代码中还提到了一个li元素的列表，这可能用于另一种实现方式，比如使用无序列表（`<ul>`）和列表项（`<li>`）来替代div。这里的li元素同样设置了`display:...
ul中4个图片都在同一位置上并且先只显示p1
06-06
如果您想让四个图片都在同一位置上，并且只显示 p1，可以考虑将四个图片设置为背景图片，并将其都放在同一个 div 元素中，然后只显示 p1。可以像这样添加样式： ``` .Picture { width: 400px; /* 根据实际需要设置...
用div和ul标签画表格进行布局兼容火狐、ie6、ie7、Opera等浏览器
09-27
最后，为了使表格的单元格看起来像是在同一行，我们需要合并单元格的边框。这里通过`border-collapse: collapse;`实现，但此属性在旧版IE中可能不完全支持，可以考虑使用`display: table-cell;`和`display: table-...
ul弹性怎么一行显示_ul li 通用的一种自动显示一行，超出部分隐藏显示...的方法...
weixin_39879881的博客
01-17 1417
ul li 通用的一种自动显示一行，超出部分隐藏显示...的方法时间：4年前作者：庞顺龙浏览：5941[站内原创，转载请注明出处]标签：cssul li 通用的一种自动显示一行，超出部分隐藏显示...的方法大部分用ul li做列表都是自动换行显示，但是有时候需要一行显示，超出部分不做展示方法1：文字截取超出部分这种方法适合都是纯文字、或者字母、数字，如果都包含就不是很好处理了方法2：css样式控制...
如何让ul居中显示在div中
WizradMyL的博客
05-15 3224
1、代码是： .slideshow{ width: 780px; height: 420px; } .slideshow ul{ display: table; margin: 0 auto; margin-top: 375px; }` 其中slideshow为其父盒子，这里让其display属性为table。当然实现的方式也有很多，可以使用最常见的“定位”等等。 在MDN中display:table解释为： These elements behave like HTML <table&g
div+ul布局
ningyb
11-25 3216
.jl_s_left .jls_left_5 .jlsl_5_2{border-bottom:solid 1px #dddddd; margin:10px 0 0 0;} .jl_s_left .jls_left_5 .jlsl_5_2 ul{float:left; display:block; font-size:13px; margin:0 10px 10px 10px;} .jl_s_l
ul与div的边距
yGIS
10-17 1765
今天在写一个的这样排版，在一个div里面有ul，其中ul中的li是横排排放的。那么我遇到的问题是ul里面的li与div有一定的边距，如下图所示，其中蓝色方框是一个li，而白色区域是一个div，图中圈出的红色方框表示li与div的距离，可见这个边距还是非常的大。 经过查阅相关资料，得知需要设置ul的边距padding，我这里设置ul的边距padding-left:10px后，得到如下图的结果。...
div+ul+li+（ul+li）布局
ningyb
11-28 5556
上一篇 是 div+ul +li    这次  我尝试了 在li里面嵌套 ul ，代码如下： ningyb————ningyb ningyb ningyb ningyb
用Div标签替换ul和li标签
最新发布
weixin_44617651的博客
05-14 414
使用 `` 标签可以替换 `` 和 `` 标签的功能，从而创建类似于列表的结构。下面是一个简单的示例，演示如何使用 `` 标签替换 `` 和 `` 标签：下面是我整理的接种解决方案，可以一起看看。
div、ul、li页面布局及css
yc15128221056的博客
12-06 6171
&lt;div id="layerControl" class="layerControl"&gt; &lt;div class="title"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt; &lt;ul&gt; &lt;li&gt; &am
练习 | div ul li 导航栏 目标50个+分析
A123ppleQueen的博客
10-12 1806
第一大类 初始情况，一个div里包括了ul--4个li ,div背景色蓝色，li背景色绿色，去掉了li自带的符号，li进行了浮动，现在以它为目标，发散成多种导航样式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> li{ list-style: none; float: l..
如何用div+ul写出表格
vito56的博客
02-25 1326
  在项目中难免会遇到奇葩的需求，比如看似表格却是纵向列，确实让人头疼。所幸最后折腾出用div+ul实现，只是相比使用框架要写比较多的样式和调试。   先上需求图：  上js代码：（其中res是调接口返回的数据） for(var i=0; i&lt;res.length; i++){ var roomState = res[i].roomState; if(room...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值