                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

这是什么原因？怎么不成一行？

a标签设置成block，li标签设置inline，怎么没反应？不该成一行的吗？，

几哦的

2018-05-25

源自：初识HTML(5)+CSS(3)-升级版 5-8

关注问题我要回答

1278

操作

收起

6 回答

weixin_慕慕4153252
2018-11-19

天涯明月刀老哥我青龙永夜真武 3w多功哈哈

0 回复有任何疑惑可以回复我~

收起回答

QiangNeverGiveUp
2018-05-25

你要知道 a标签是定义链接的 li属于块级元素所以会从上到下排列但是li{display:inline}就将块级元素变成内联元素，所以才会变成一横排

0 回复有任何疑惑可以回复我~

收起回答

慕田峪4419701
2018-05-25

<li><a href="">导航链接一</a></li>

<li><a href="">导航链接二</a></li>

<li><a href="">导航链接三</a></li>

<li><a href="">导航链接四</a></li>

</ul>

你应该是这么写的吧？虽然li是inline, 但是内部的a是块级标签，子标签继承了父块标签的宽度，那么a就会撑满ul的宽度，而li又会被内容撑满，所以就是ul的宽度，就算他是inline，下一个li显示不下，也自然会挪到下一行

0 回复有任何疑惑可以回复我~

收起回答

QiangNeverGiveUp

常用的内联元素有： <a>、、 、、、、<label>、<q>、<var>、<cite>、<code> 老哥 a是内联元素

2018-05-25 回复有任何疑惑可以回复我~

慕田峪4419701 回复 QiangNeverGiveUp

额我知道 a是内联标签，但是他在css里不是又把a设置为块级标签了嘛

2018-05-25 回复有任何疑惑可以回复我~

几哦的提问者回复慕田峪4419701

但是我a标签不是设置了55px宽度吗

2018-05-25 回复有任何疑惑可以回复我~

查看3条回复

QiangNeverGiveUp
2018-05-25

a{
    display: block;
    width: 55px;
}

这段去掉

0 回复有任何疑惑可以回复我~

收起回答

几哦的提问者

这个特意加上的

2018-05-25 回复有任何疑惑可以回复我~

几哦的提问者
2018-05-25

这是html

0 回复有任何疑惑可以回复我~

收起回答

慕田峪4419701
2018-05-25

你的html是怎么写的

1 回复有任何疑惑可以回复我~

收起回答

慕田峪4419701 回复几哦的提问者

我猜测你的目的是想要把 li变成横排的，但是li内部的a标签又想要竖排的。css应该这么写，如下： *{ padding: 0px; margin: 0px; } ul{ list-style: none; font-size: 25px; } li{ float: left; margin-right:20px; } a{ display: block; }

2018-05-25 回复有任何疑惑可以回复我~

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1226029 人
解答问题 18236 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

本课相似问答

1 回答这个效果是以因为什么原因呀？

2 回答有间隔是什么原因？

2 回答错误的原因是什么

3 回答什么原因呢？

2 回答第九行一加<hr>就会报错不知道什么原因

搜索更多本课相关问答

这是什么原因？怎么不成一行？

我要回答关注问题

热搜

最近搜索清空

这是什么原因？怎么不成一行？

6 回答

本课相似问答

这是什么原因？怎么不成一行？