`
piperzero
  • 浏览: 3554989 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

css中让两li并排

 
阅读更多
将float:left;

<style type='text/css'>
li{
float:left;
list-style-type:none;
width:100px;
margin:1px;
background-color:silver;
}
.b{
display:none;
}
.bb:hover .b{
display:block;
}
</style>
<ul>
<li class='bb'>1
<ul class='b'>
<li>11</li>
<li>12</li>
</ul>
</li>
<li>2</li>
</ul>

分享到:
评论

相关推荐

    div+css+ul-li制作横向导航栏

    3. 将`&lt;li&gt;`元素设置为并排显示,可以使用浮动或者Flexbox布局: - 浮动方式: ```css #navbar ul li { float: left; } ``` - Flexbox方式(更现代,推荐): ```css #navbar ul { display: flex; } #...

    CSS实现ul和li横向排列的两种方法

    本文将详细介绍两种利用CSS实现`&lt;ul&gt;`和`&lt;li&gt;`横向排列的方法。 ### 方法一:使用`float:left` 首先,我们可以使用`float`属性来改变`&lt;li&gt;`元素的行为。默认情况下,`&lt;li&gt;`是块级元素,占据一整行。通过将`&lt;li&gt;`的...

    纯CSS导航菜单 Demo

    例如,可以为`&lt;nav&gt;`添加背景色,为`&lt;ul&gt;`设置内边距,以及为`&lt;li&gt;`设置浮动,使其并排显示: ```css nav { background-color: #333; } .menu { list-style-type: none; padding: 0; } .menu li { float: ...

    设置<li>让页面同时显示两列

    我们可以将`&lt;li&gt;`元素的`float`属性设置为`left`,这样它们就会向左浮动,并且如果空间允许,它们会并排显示。例如: ```css li { float: left; width: 50%; /* 分配给每列的宽度 */ } ``` 然而,这种方法存在...

    html+css编写的简单静态页面.rar

    例如,我们可以为`div`元素设置背景色,为`ul`列表项添加边距,或者使用浮动让多个`div`并排显示。 在这个例子中,“html+css编写的简单静态页面”很可能包含了一个基础的HTML文件,这个文件可能使用了`div`来组织...

    jsp ul 下的li 标签循环滚动

    /* li元素并排显示 */ } ``` 3. **JavaScript/jQuery 实现**:接下来,我们可以使用JavaScript或者jQuery来控制`li`元素的滚动。这里以jQuery为例: ```javascript $(document).ready(function() { var ...

    简单的CSS样式导航菜单

    首先,让我们了解CSS的基础。CSS是一种样式语言,用于描述HTML或XML(包括SVG、MathML等)文档的呈现。它的主要任务是分离内容和表现,使网页设计更易维护和扩展。在CSS中,我们通过选择器来指定要应用样式的元素,...

    基于html和CSS3制作酷炫的导航栏

    2. **li 去掉圆点**: 通过添加`list-style:none`到`li`元素的CSS规则中,我们可以消除默认的列表符号,即圆点。 3. **li中字体水平、竖直居中**: 使用`text-align:center`使文本水平居中,而`line-height`与元素...

    CSS列表样式设计

    本篇将重点讲解如何利用CSS进行列表样式的定制,让您的网页列表更具吸引力。 一、基本列表样式 在HTML中,列表主要分为无序列表(`&lt;ul&gt;`)和有序列表(`&lt;ol&gt;`),以及定义列表(`&lt;dl&gt;`)。CSS可以通过选择器来操作...

    css.rar_css c++

    总的来说,这个压缩包提供了一个实践平台,让我们能够深入理解CSS在创建动态菜单中的应用,同时也提醒我们,尽管C++和CSS在技术栈中的位置不同,但它们都在构建现代网络体验中扮演着不可或缺的角色。

    css3响应式导航

    CSS3中的媒体查询让我们能够基于设备的特定特性(如视口宽度、设备像素比等)来应用不同的样式。例如,我们可以定义在小屏幕设备上显示的样式: ```css @media screen and (max-width: 600px) { /* 在这里定义当...

    div+CSS 多排多列的显示东西.不使用LI

    本主题探讨的是如何使用`div`和CSS实现多排多列的布局,而不依赖于`li`(列表项)元素。下面我们将深入讲解这个话题。 首先,`div`是一个通用的块级元素,它本身没有特定的语义,但可以通过CSS赋予不同的样式和布局...

    CSS+DIV网页布局技巧(精髓)

    在IE中,两个相邻的块级元素可能会出现外边距折叠现象,即两个元素之间的外边距会被合并成一个较大的值。为了避免这种情况,可以在两个元素之间插入一个空的 `div`,并为其设置 `clear: both;`。 ```css .clear { ...

    50个div和css样式

    例如,通过浮动,我们可以让多个`div`元素并排显示: ```css div.box { float: left; width: 30%; margin-right: 10%; } ``` 在这个例子中,所有具有`.box`类的`div`元素会左浮动,并占用30%的宽度,留下10%的...

    为导航栏的li加上.selected样式 demo

    /* 使li元素并排显示 */ margin-right: 10px; /* 设置间距 */ } /* 然后定义.selected类的特殊样式 */ nav ul li.selected { background-color: #f2f2f2; /* 更改背景色 */ color: #333; /* 更改字体颜色 */ ...

    css 按钮菜单样式

    在这个例子中,`position: absolute`让下拉菜单相对于其最近的已定位祖先(这里是`.dropdown`)进行定位,而`:hover`伪类再次发挥了作用,使得在主菜单项被悬停时显示下拉菜单。 最后,`index.html`可能是包含上述...

    div+css菜单生成器

    例如,使用`display: inline-block`或`flex`可以让菜单项并排显示;利用`:hover`伪类可以实现鼠标悬停时的高亮效果。 **三、div+css菜单生成器的功能** 1. **可视化编辑**:该生成器提供了一个可视化的界面,用户...

    三级横向列表显示CSS

    设置`display`属性为`inline-block`可以让列表项并排显示,而不是默认的换行。然后,通过设置`position`为`relative`,我们可以为下级菜单创建相对定位。下级菜单的`position`应设为`absolute`,以便它们相对于父...

    CSS+DIV 导航菜单的制作

    例如,设置为`left`可以让菜单项并排显示: ```css #menuDiv li { float: left; font-size: 16px; color: #c49a8e; margin: 0; padding: 0; border-right: 1px solid #000000; background: url(../img/...

    CSS样式写的导航栏

    3. **水平排列链接**:通过`display: inline-block`使`&lt;li&gt;`元素并排显示。 ```css ul li { display: inline-block; } ``` 4. **间距调整**:设置`&lt;li&gt;`元素之间的间距,使其看起来更加舒适。 ```css ul li ...

Global site tag (gtag.js) - Google Analytics