新手求助段落平级的问题

鼻屎炖蘑菇 · 发表于 2021-10-26 19:02:54

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

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

x

<body>

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

帮老师做个项目这样子的代码敲出来后这个标题是在我写的链接的下边想问下各位大佬如果我想将标题放到链接直接放在链接的后边该如何实现啊？

鼻屎炖蘑菇 · 发表于 2021-10-26 19:10:36

搞懂了把P标签换成span标签即可然鹅又来了新的问题为啥子这里用text-align:right 这行字不会跑到右边去啊

大马强 · 发表于 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>

einsgo · 发表于 2021-10-29 19:00:07

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

因为p标签是行级元素（inline），必须独占一行，你把 displaced改成block就行了

Rydia · 发表于 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>

账号		自动登录	找回密码
密码			立即注册

新手求助 段落平级的问题

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

新手求助段落平级的问题