css ul两列显示

最新推荐文章于 2024-06-11 12:15:54 发布
最新推荐文章于 2024-06-11 12:15:54 发布
阅读量2.5k 收藏
点赞数
文章标签： css class xhtml float html c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huijunliang/article/details/7561483
版权 




<!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>
		
		<style type="text/css">
		#hotNeeds ul{float:left;}
		</style>
	</head>

<body>
<div id="hotNeeds"><h2>热门需求排行</h2>

          <ul>
          
              <li class="down"><span>1</span>
                <a href="/hot-search/%E5%A1%91%E6%96%99-1.html" title="塑料">塑料</a>
              </li>
          
              <li class="ls down"><span>2</span>
                <a href="/hot-search/%E4%B8%8D%E9%94%88%E9%92%A2-1.html" title="不锈钢">不锈钢</a>
              </li>
          
              <li class="down"><span>3</span>
                <a href="/hot-search/u%E7%9B%98-1.html" title="u盘">u盘</a>
              </li>
          
              <li class="ls up"><span>4</span>
                <a href="/hot-search/%E5%89%B2%E8%8D%89%E6%9C%BA-1.html" title="割草机">割草机</a>
              </li>
          
              <li class="down"><span>5</span>
                <a href="/hot-search/%E7%94%B5%E6%9C%BA-1.html" title="电机">电机</a>
              </li>
          
              <li class="ls down"><span>6</span>
                <a href="/hot-search/%E8%BD%A6-1.html" title="车">车</a>
              </li>
          
              <li class="up"><span>7</span>
                <a href="/hot-search/%E7%94%B5%E5%AD%90%E5%85%83%E5%99%A8%E4%BB%B6-1.html" title="电子元器件">电子元器件</a>
              </li>
          
              <li class="ls down"><span>8</span>
                <a href="/hot-search/%E6%A9%A1%E8%83%B6-1.html" title="橡胶">橡胶</a>
              </li>
          
          </ul><ul>
          
              <li class="up"><span>9</span>
                <a href="/hot-search/%E4%BD%93%E6%B8%A9%E8%AE%A1-1.html" title="体温计">体温计</a>
              </li>
          
              <li class="ls down"><span>10</span>
                <a href="/hot-search/%E5%AE%B6%E5%85%B7-1.html" title="家具">家具</a>
              </li>
          
              <li class="down"><span>11</span>
                <a href="/hot-search/%E7%A9%BA%E8%B0%83-1.html" title="空调">空调</a>
              </li>
          
              <li class="ls down"><span>12</span>
                <a href="/hot-search/%E6%9C%BA%E6%A2%B0-1.html" title="机械">机械</a>
              </li>
          
              <li class="down"><span>13</span>
                <a href="/hot-search/%E5%8C%85-1.html" title="包">包</a>
              </li>
          
              <li class="ls down"><span>14</span>
                <a href="/hot-search/%E9%97%A8-1.html" title="门">门</a>
              </li>
          
              <li class="down"><span>15</span>
                <a href="/hot-search/%E7%8E%A9%E5%85%B7-1.html" title="玩具">玩具</a>
              </li>
          
              <li class="ls down"><span>16</span>
                <a href="/hot-search/%E7%94%B5%E6%B1%A0-1.html" title="电池">电池</a>
              </li>
          
          </ul>
        </div>


</body>

huijunliang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS--再究内容变两列
weixin_43578860的博客
03-30 756
几行内容，如何变两列
ul和li简单语句实现DIV+CSS分两列（多列）布局显示(转)
系统运维
05-04 956
显然：UL+LI在布局上比table灵活得多。 比较分两列或者多列显示： table：你需要在服务器上写一大堆代码判断是不是需要换行，或者切分是不是准确 DIV：你只需要定义好css，剩下的做事情叫交给浏览器吧。 最简单的代码：用ul除以li的宽度=列数 &lt;style type="text/css"&gt; .mycode{ width:300...
如何用css实现两列布局?
最新发布
weixin_45596561的博客
06-11 1376
2.通过给两列都设置float:left属性和宽度就可以实现两列布局，还要设置伪元素清除浮动；通过给容器设置flex布局，然后每一列设置flex:1，就可以实现两列等宽；实现两列布局有多种方法，这里我会介绍几种常见的技术，包括浮动、Flexbox和Grid布局。无论使用哪种布局方式，都要考虑响应式设计，以确保布局在各种设备上都能良好展示。Grid布局是CSS中最强大的布局系统之一，尤其适合复杂的网格布局。就可以实现等宽两列布局，这种是只在容器设置即可。4. 多总结即可，容易忘。
CSS------如何让ul中的li分为两列甚至多列
weixin_30402085的博客
01-21 967
转载： http://blog.sina.com.cn/s/blog_7f13f92a0100rkfg.html 只需要复制ul和li中的style样式即可 如果需要自定义多少列，只需要修改li中的with属性即可 <ul style="overflow:hidden;zoom:1" > 　　@foreach (IGrouping<strin...
DIV+CSS布局一行两列问题（Repeater布局）
weixin_34406061的博客
06-27 313
代码<div><asp:RepeaterID="rptAppReview"runat=server><ItemTemplate><div><divstyle="width:80px;height:70px;float:left;clear:bo...
CSS布局之两列布局
weixin_47471015的博客
01-11 3531
两列布局 两列布局一般情况下是指定宽与自适应布局，两列中左列是确定的宽度，右列是自动填满剩余所有空间的一种布局效果； 左列自适应, 右列定宽 float + margin 属性实现； float + overflow 属性实现； display 属性的 table 相关值实现； 使用绝对定位实现； 使用 flex 实现； 使用 Grid 实现； 方案一：float + margin 属性实现 <style> *{margin: 0;padding: 0;} #left
将ul+li 分两列显示(横向显示)的方法
09-25
本问题中提到的"将ul+li 分两列显示(横向显示)"，实际上是要将一个单列的列表转换成两列，并且保持列表项水平排列。以下是两种实现这一目标的方法： 方法1：使用DIV+CSS代码 在这个方法中，我们首先创建一个外层的`...
div+css实现两列table效果示例
12-13
这个示例演示了如何通过`div`和`css`实现一个具有两列布局的表单，其中包含可选的地区、类别和阶段信息。这种布局模式对于创建用户友好的数据输入界面非常实用，同时也易于维护和扩展。通过调整CSS样式，可以轻松...
ul和li实现分两列（多列）布局显示
09-25
DIV+CSS分两列（多列）布局显示，下面有个不错的示例，大家可以参考下
DIV+CSS一行两列布局
weixin_30652897的博客
08-12 380
实现效果： div.main{width:500px;background:yellow;} .main .col-1{float:left;width:200px;height:300px;background:#eee;border:1px solid #ccc;} .main .col-2{float:left;margin-left:5px;width:290px;height:...
CSS实现两列布局
zxl1990_ok的博客
11-17 2305
左列宽固定，右列自适应 效果如下： 利用float + margin <style> .left { background-color: red; width: 200px; height: 500px; float: left; } .right { background-color: green; margin-left: 200px; /* 大于或等于左列宽度 */ height: 500px; } .
div css 一行两列,div+css如何做页面的一行两列布局？
weixin_29139581的博客
08-03 591
center_tdbgall{background:#ffffff;width:900px;}.middle400 {float:left; width:400px; padding:5px}.middle250 {float:left; width:250px; padding-bottom:5px}.middle250r {float:right; width:215; padding:5px...
CSS（2）：两列布局
羽墨灵丘的博客
02-05 1464
css实现两列布局的几种方法
CSS--浮动(一行两列,三行三列)
weixin_46858088的博客
12-30 492
浮动属性： 作用：控制页面元素脱离原有文档流，实现向左或向右移动，直到该元素外边缘碰到其包含框或另一个浮动框的边缘停止，标准流中的其他盒子将顶到浮动盒子的位置。浮动的元素不占据实际空间。 属性：float 取值： none：表示对象不浮动，默认值 left：对象向左浮动 right：对象向右浮动 一行两列 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &lt
单列变双列css_DIV+CSS实现列表一行两列的效果
weixin_39597868的博客
02-11 784
DIV+CSS没有系统地学习过，感觉还没入门，实际用起来捉襟见肘的，想用DIV+CSS控制，实现列表一行两列的效果，有人给出如下办法：.left_b{width:376px;height:auto; float:left;}.left_b li{width:170px;height:30px; line-height:15px; float:left; margin-right:10px;}.le...
CSS实现网页布局(一列，两列，三列)
Bazingaea的博客
03-13 1万+
1.一列布局（又叫单列布局）<style type="text/css"> body{margin:0;padding:0;} .head{heigth:200px;background:blue;} .main{height:500px;width:800p;margin:0 auto;} .footer{background:blue;height:200px;w
【css】css实现div两列布局（固定和自适应）（两种方法）
金金的博客
08-19 9162
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法） 1.实现目标 左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应 2、思路 1、让两个div并排到一行 div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute； 2、一个div宽度固定，另一个div自适应剩下的宽度 对自适应宽度的div处理方法是不去设置它的width属性，浏览器会自动计算后让它占一行，接下来给他设置margin-left属
div+css常见布局：两列布局、三列布局、圣杯布局和双飞翼布局
热门推荐
icemwj的博客
10-05 1万+
1、两列布局：左边固定，右边自适应 左右两侧，左侧固定宽度 200px，右侧自适应占满。 方法1： 左侧采用 float:left 往左浮动，右侧 margin-left:200px，留出左侧内容的空间 // html 代码 <div class="divBox"> <div class="left">左侧固定200px</div> <div class="right">右侧自适应</div> </div> // C
如何用CSS实现ul两列分部
02-14
您可以使用 CSS 的 `float` 属性来实现 ul 两列分布。 例如： ``` ul { width: 80%; margin: 0 auto; } li { float: left; width: 50%; } ``` 在上面的代码中，我们将 ul 的宽度设置为 80%，并通过 `margin: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值