鱼C论坛

 找回密码
 立即注册
查看: 4336|回复: 4

新手求助 段落平级的问题

[复制链接]
发表于 2021-10-26 19:02:54 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
<body>

<a href="#">设备展示</a>
<a href="#">设备管理</a>
<a href="#">设备看板</a>
<p class="biaoti">设备健康状态监管平台</p>
<hr>
实现的效果出来大概是这个样子:
设备展示 设备管理 设备看板
设备健康状态监管平台



帮老师做个项目 这样子的代码敲出来后 这个标题是在我写的链接的下边 想问下各位大佬 如果我想将标题放到链接直接放在链接的后边该如何实现啊?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2021-10-26 19:10:36 | 显示全部楼层
搞懂了 把P标签换成span标签即可 然鹅又来了新的问题 为啥子这里用text-align:right 这行字不会跑到右边去啊
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-10-26 19:10:40 | 显示全部楼层
这样可以吗
<body>
<span>设备展示<a href="#"></a></span>
<span>设备管理<a href="#"></a></span>
<span>设备看板<a href="#"></a></span>
<p class="biaoti">设备健康状态监管平台</p>
<hr>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-10-29 19:00:07 | 显示全部楼层
鼻屎炖蘑菇 发表于 2021-10-26 19:10
搞懂了 把P标签换成span标签即可 然鹅又来了新的问题 为啥子这里用text-align:right 这行字不会跑到右边去 ...

因为p标签是行级元素(inline),必须独占一行,你把 displaced改成block就行了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-10-31 11:52:50 | 显示全部楼层
对于问题1:如何把标题放在链接的后面
        首先要明白元素是什么类型,占了多大位置,类型基础的有以下3种:
                display:block 块元素(h1-h6、p等),会占据单独一行
                display:inline 行内元素(span、a等),可以在行内有多个,不能直接设置宽高
                display:inline-block 上面俩的结合版本(img等),可以设置宽高,又不会独占一行
               
                还有许多相关的特性,可以在MDN上查看display,这里只简单讲述一点所需的知识。

        如果想要把标题放到元素同一行,只需要把p改成不是块元素就行了。
        但是标签本身是有自己语意的,不建议直接换成span,可以给p加个display:inline。
        
        当然,方法真的非常非常非常多,需要你去学习,一时半会讲不完的。。。


对于问题2:span标签设置test-align:right不生效的问题
        如果仔细阅读了上面对元素类型的小科普,会发现一点:span是行内元素,还有一点test-align是父元素对子元素的设置
        p元素的宽度有一整行这么大,你让文字右对齐,那自然就会跑到屏幕右端了啊。
        但是span里就不一样了,span的实际大小,如果不改别的css样式,是和内容(这里是文字)大小差不多大的。
        如果容器大小和内容一样大,屏幕上就会出现左对齐==右对齐==居中对齐的情况了。
        (听不懂没关系,学完盒子模型再回来就行了)

        直接给你其中一种比较好用的解决方案,达成你想要的效果
        把下面代码直接复制到你的<head><head/>中即可
<style>
    span{
      position: absolute;
      right: 0;
    }
  </style>
               

        
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 10:18

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表