设置div中两端字对齐，字体平均隔开

最新推荐文章于 2023-10-24 14:11:35 发布
最新推荐文章于 2023-10-24 14:11:35 发布
阅读量951 收藏 1
点赞数 1
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60331671/article/details/124690401
版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
.yi span{
font-size: 16px;
color: #06060685;
float: left;
width: 78px;
text-align: justify;
text-justify:distribute;
text-align-last: justify;
border:1px solid red;
}
</style>
</head>
<body>
<p>两端对齐</p>
<div style="border-bottom: 1px dashed #b3b3b3; margin-top: 8px;">
<div style="width: 49%;">
<p class="yi">
<span class="gu">常用名</span>
<span class="bian1">张仲景</span>
</p>
</div>
</div>
</body>
</html>

萍滴滴
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css两端对齐之div+css布局实现2端对齐的4种方法总结
12-30
div+css布局实现2端对齐是我们网页排版中经常会使用到的，这篇文章将总结一下可以实现的方法： html结构 实现demo里面的div通过Css进行2端对齐。 <div class=box> <div class=demo> <div>1</div> <div>2</div> ...
css实现div内一段文本的两端对齐
weixin_34005042的博客
03-09 623
在一个固定宽度的div内，使得P标签内的文本两端对齐：text-align: justify;text-justify:inter-ideograph; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ju...
DIV内文字两端对齐
weixin_30843605的博客
03-15 2399
div{ text-align: justify; text-justify:inter-ideograph; } 转载于:https://www.cnblogs.com/wanlibingfeng/p/10535656.html
css设置文字两端对齐
yinge0508的博客
08-13 813
文字两端对齐设置：text-align: justify;
div块元素 两端对齐
Yangjie_iii的博客
11-23 2416
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> .item{ height: 32px; line-height: 32px; } .n...
CSS 文字两端对齐
weixin_44325341的博客
04-08 235
<span class="name">时效性</span> 注意一定要在span里面加一个after伪类把他撑起来 亲测有效 <style> .name{ width: 70px; text-align: justify; display: inline-block; word-break: break-all; height: 21px; line-heig..
css文字两端对齐
GAOJINGZHEN36的博客
04-19 169
在写页面的时候，有时候只有一行文字，上面是一张图片，但是要文字和图片两端对齐，这时候就用到css是文字两端对齐，完整demo如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> ...
CSS columns实现两端对齐布局的示例代码
12-28
兜兜转转一大圈，最后发现实现两端对齐布局方式最简单的居然是使用CSS columns多栏布局。 例如，我们想要实现3列元素两端对齐，中间间隙是30px，CSS代码为： .container { columns: 3 30px; } 叮咚，结束了，game ...
css实现不同浏览器下兼容文本两端对齐
12-28
在 form 表单的前端布局中，我们经常需要将文本框的提示文本两端对齐，例如： 比较粗暴的做法是在需要隔离边距的文本中加标签，然后分别控制每个文字的边距，这种方法比直接加空格或者占位符更精准，我之前也都是...
HTML让两个span分别向左向右对齐（两端对齐）
热门推荐
良月柒
04-03 2万+
CSS代码 .box { width: 100%; /* 因为 content 会另起一行，影响样式的话，height 设置为具体的值可以避免高度变高的情况 */ height: 100%; /* 设置元素两端对齐 */ text-align: justify; } /* 这里的伪元素一定要加上，不然span元素不能两端对齐 */ .box:af...
css文字与文字之间的间距
最新发布
A_man_of_ideas的博客
10-24 660
四分之一个汉字的间一个汉字的间距半个文字的间距。
css两行文字两端对齐
有问题可关注公众号：前端研究院 后台输入问题回复
03-25 512
效果如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <style> span{ display:inline-block; ...
css实现文字两端对齐（兼容）
前端小记
09-28 5947
今天做一个项目，客户要求文章文字两端对齐，一开始使用了 text-align:justify; text-justify:distribute-all-lines;发现在chrome下正常， IE下不足一行的文字也被强行两端对齐，非常不友好， 后来一查资料发现，应该这样写： text-align:justify; text-justify:inter-ideograph;，测试后，
html中表格中字体两端对齐,CSS真正实现文字两端对齐布局
weixin_33188832的博客
06-07 3690
css实现文字两端对齐一直以来都是一个令人头痛的事情，我也是经常遇到这样的难题，这次抽点时间整理记录一下。这里真正实现了文字两端对齐功能，下面是代码，其中上面一种使用的是表格布局，下面的是使用的DIV。这里有几个要注意的重点：1、从效果图可以看到，除了要在块级元素加text-align:justify样式外，还需要在里面加一个空的span元素，并应用样式。另外，对于中文还必须用空格隔开汉字，否则也...
实现两个div水平对齐
聆听。。花开雨落的博客
09-26 1197
要实现两个div水平对齐，可以使用CSS中的flex布局。在这个例子中，我们创建了一个容器div，里面包含两个box div。使用flex布局可以让容器中的元素水平排列，并且通过设置每个元素的宽度为50%，可以使两个div在水平方向上占据相等的空间，从而实现对齐。
div+css怎样才能靠左边对齐,为什么距左边有很大的间距
illhf2008的专栏
07-14 2546
解决方法： aaa aaa aaa aaa css:#kechen { padding:0px; list-style-type:none; float:left; } #kechen ul{ padding:0px; margin:0px;}#kechen li{height:30px; text-align:left; margin:0px;
React一个div多个样式写法
JulyNight的博客
01-28 630
<div className={classnames({ 'swiper-slide': true, [styles.slide1]: true,})}></div> 以上代码意思是swiper-slide和slide1两个选择器的样式都要，如果不要某个样式可以写false（当然这个适用于两个或者多个样式都需要） ...
div布局系列 - 两端对齐的方法
zhuxufeifei的博客
08-19 5977
方式一：box-sizing:border-box html代码部分 &lt;div class="content clear-fix"&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;d
实现div文字两端对齐
08-10
3.使用弹性盒子布局（flexbox）：将div设为flex容器，可以通过设置容器内文字的对齐方式来实现两端对齐。使用justify-content: space-between属性可以将div内的文字分散到容器的两端。这样，如果容器的宽度发生改变...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值