章节
问答
课签
笔记
评论
占位
占位

列表--内联列表

Bootstrap像去点列表一样,通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表而且去掉项目符号(编号)保持水平显示。也可以说内联列表就是为制作水平导航而生。
/*源码查看bootstrap.css文件第584行~第593行*/

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

看个示例:

<ul class="list-inline">
    <li>W3cplus</li>
    <li>Blog</li>
    <li>CSS3</li>
    <li>jQuery</li>
    <li>PHP</li>
</ul>

任务

我也来试试:完成下面任务

在右侧代码编辑器第18行输入正确代码,让列表项水平显示,如下图所示:

备注:这一小节没有正确性验证,请查看结果窗口与任务所给的结果图片是否一致,从而判断输入代码是否正确。

?不会了怎么办

参考代码:

<ul class="list-unstyled">
    <li>
       城市:
       <ul class="list-inline">
          <li>北京</li>
          <li>上海</li>
          <li>南京</li>
          <li>厦门</li>
      </ul>
    </li>
</ul>  
||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最赞回答 / 3116ZY
CSS选择器中的“子元素选择器”,选中当前元素的第一代子元素;例子:<div class="one">    <div class="two">        <div class="three"></div>    </div></div>.one>.two,选中类名为one下的第一代(>),类名为two的元素;

最赞回答 / 以气御码
解决了,看到评论区“Gemma_Tong”的回答了:“在bs4里面,除了ul要使用list-inline之外,li全部还要用list-inline-item这个类来实现水平”!

最新回答 / qq_海绵宝宝的派大星_1
<ul class="list-unstyled">    <li>城市:</li>    <ul class="list-inline">    <li>北京</li>    <li>伤害</li>    <li>南京</li>    <li>厦门</li>    </ul></ul>

最新回答 / 我就不睡觉
选中list-inline这个class下的li 设置它的display为内联块 左右填充各5个像素 

已采纳回答 / No_Idea
好像是没有过多的描述的  

最新回答 / qq_我是人间惆怅客_0
他这个输入法有问题  你可以复制代码到编辑器 反正没影响 插件都可以远程访问

已采纳回答 / 不知不觉后知后觉嗯
<...code...>给城市添加就行了

已采纳回答 / 慕设计8442914
就是带有.list_inline标签的,子标签li

已采纳回答 / 喵星陶
内联样式,简单来说使用该显示模式之后,受影响的标签会被当做一个一个的块对象来处理,每一个块之间相邻的对象会被排列在同一行内,且中间有空格,即横向排列

最新回答 / 酸奶不是牛奶
引入路径正确,同一个文件,在chrome浏览器,别的样式可以显示,list-inline 和list-unstyled没有用

+ 我来回答 回答最高可+2积分

已采纳回答 / Perona
子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。

最赞回答 / 简单的人
<ul>的margin-left:-5px与第一个<li>的padding-left:5px正好抵消,所以不会出现覆盖的情况(因为多出去的5个像素本身就是第一个li留下的空白)。
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言