首页 前端知识 【全面|详解】调整元素li中圆点和文字的大小、样式、距离。

【全面|详解】调整元素li中圆点和文字的大小、样式、距离。

2024-04-29 11:04:50 前端知识 前端哥 523 894 我要收藏

效果

我想把:

调整成:


 步骤 

步骤一

1、首先把 li 那个小圆点的大小调大一点 

这里要用到marker选择器

li::marker {
  font-size: 30px;
}

步骤二

2、随后调整一下左边的点右边的文字之间的间距

  • 方法一:  在 li 的选择器里面加上这一行,但是对我来说没用。可能是因为我把它们的文字大小调整得不一样了?
  text-indent: -10px;
  •  方法二:在 li 里面把文字重新用span包裹一下,然后为这个子span设置元素样式。【这里设置margin-left为负值就可以了。而且还可以单独用font-size调整文字的大小】
<li :style="color(scope.row.advertiseDiagnostics)">
//在li里面为文字重新设置一个span,然后调整文字的样式。
            <span class="li-content">{{ scope.row.advertiseDiagnostics }}</span>
   </li>
.li-content {
  color: black;
  margin-left: -20px;
  font-size:18px;
}
  • 经过这一步,我的样式变成这样啦。

 步骤三

现在看起来已经很不错了,但是我发现这个小圆点和文字是不够对齐的。猜测是因为文字的大小不一样。因此:

3、将圆点文字对齐

  • 方法一:为每个子元素添加一个属性,但是我没效果欸,为啥我又没效果5555
vertical-align: middle;
  • 方法二:我是用死办法解决的,就是不断地调整文字和点的大小,最终使其看起来统一,而且我还把方法一的middle改成了top。
li::marker {
  font-size: 25px;
  vertical-align: middle;
}
.li-content {
  color: black;
  margin-left: -20px;
  font-size:15px;
  vertical-align: top;
  margin-bottom:5px;
}

最终效果:


 附加

我还想实现一下,在下面加入其他的信息。我成功了!!!只要再用一个div把整个li包起来就可以啦!!

<div>
  <li :style="color(scope.row.advertiseDiagnostics.info)">
    <span class="li-content">{{ scope.row.advertiseDiagnostics.info}}</span>
  </li>
  <div class="additionalInfo"> <span>{{ scope.row.advertiseDiagnostics.additionalInfo1}}</span>
    <el-divider direction="vertical"></el-divider>
    <span><span>{{ scope.row.advertiseDiagnostics.additionalInfo2}}</span></span>
  </div>
</div>




li::marker {
  font-size: 25px;
  vertical-align: middle;
}
.li-content {
  color: black;
  margin-left: -20px;
  font-size: 15px;
  vertical-align: top;
  margin-bottom: 5px;
}
.advertise-list-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.additionalInfo {
  color: #909399;
  margin-left: 15px;
  font-size: 7px;
}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5981.html
标签
评论
发布的文章

AJAX和JSON

2024-05-03 19:05:37

qml 文件中 JSON的使用

2024-05-03 19:05:03

json在线格式化代码

2024-05-03 19:05:01

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!