我最近读了一个非常聪明的技巧来完成你所要求的工作。

简而言之,你只需要使用text-align:justify;在容器元素上实现这一点,结合一个额外的不可见块。

这是因为内联块元素被视为文本内容的一部分,每个元素实际上是单个单词。

使用对齐方式将展开文本中的单词,以便它们填充元素的整个宽度,并在单词之间增加空格。对于内联块元素,这意味着它们之间具有均匀间隔。

最后我提到一个额外的看不见的块。这是必需的,因为正常的text-align:对齐不会证明最后一行文本。对于正常文本,这正是你想要的,但是为了对齐内嵌框框,你希望它们都对齐。

解决方案是将额外的不可见但100%的宽度元素添加到内联块元素列表的末尾。这将成为文本的最后一行,因此,正当的技术将适用于其余的块。

您可以使用:after pseudo-selector来创建不可见元素,而无需修改标记。

[编辑]

查看您添加到该问题的图片后,最后一次更新。 (我没有一个更好的答案,但一些额外的想法可能是有用的)。

理想情况下,您需要的是一个最后一行选择器。然后你可以文本对齐:对齐主文本和text-align:居中的最后一行。那会做你想要的

可悲的是,最后一行不是一个有效的选择器((第一行是但不是最后一行),所以这是想法的结束。

更有希望的思想是text-align-last,它作为一个特征确实存在。这可以完全符合你想要的:

text-align:justify;

text-align-last:center;

完善。

除非它是非标准的,并且浏览器支持非常有限。

我认为最后的手段可能是您的选择,如果您只能支持部分浏览器支持。至少会得到你想要的一些用户。但这并不是一个明智的做法。

我的直觉是,尽可能接近你要得到的。非常贴近您想要的,但不完全相同。我希望我被证明是错误的,但我会感到惊讶。太糟糕了,因为我似乎是一个完美的逻辑的事情要做。

html如何整齐排列选择框,html – 如何均匀地排列多个内嵌块元素?相关推荐

  1. html块左右排列,html – 如何均匀地排列多个内嵌块元素?

    我最近读了一个非常聪明的技巧来完成你所要求的工作. 简而言之,你只需要使用text-align:justify;在容器元素上实现这一点,结合一个额外的不可见块. 这是因为内联块元素被视为文本内容的一部 ...

  2. CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解

    原文网址:CSS之排列系列--块级元素.内联元素.内联块元素--区别/详解_IT利刃出鞘的博客-CSDN博客 简介 本文介绍CSS的块级元素(block).内联元素(inline)和内联块元素(inl ...

  3. html内联框上下重叠,如何解决IOS端两个内联块元素无法上下对齐的问题?

    需求是一个简单的搜索框:包括一个输入框和按钮,在PC端宽度较短且固定,在移动端独占一行 PC端和安卓移动端都没有问题,但是在IOS端上下没有对齐,相差1px IOS端: 安卓端: Html代码: Cs ...

  4. html日期选择框_第十课 日期选择框(datepicker)的操作

    有客户问:datepicker是怎么操作的? 我答:datepicker可以直接用"输入文本"组件. 客户说:不是,现在我操作的这个网页上datepicker是不能直接输入的,否则 ...

  5. C++ 主程序中打开子程序窗口隐藏,操作控件 遍历窗口控件句柄EnumChildWindows();获取其他程序进度条数据 操作选择框 按钮点击

    1.线程启动子程序  ShowWindow(hWnd, SW_SHOW)显示 ShowWindow(hwnd, SW_HIDE);隐藏 system_hide(L"Odin3.exe&quo ...

  6. Android RadioButton 修改选择框

    效果图 是否被选中打印效果图 RadioButon  是单选框 ,选中之后再次点击无法取消,这样呢我们可以配合RadioGroup 使用,选择其他的RadioButton 这样的话刚才的的那个就取消了 ...

  7. Android CheckBox 修改选择框

    效果图 是否被选中打印效果图图 CheckBox  是多选框 ,选中之后可以再次点击取消操作. 在使用的时候注意padding 是相对于字体来的不是相对选择框 下面第一个位置调整了 使用了paddin ...

  8. 一个分析“文件夹”选择框实现方法的过程

    在软件开发中,我们如果存在"导入导出"的场景时,难免会用到"文件夹"选择框.之前一直没有太关注过这个的实现过程.最近在工作中遇到了一些问题,我做了一些研究.在此 ...

  9. input 选择框改变背景小技巧

    最近在项目中遇到一个问题,想要改变input选择框的背景,然而,令我没有想到的是,竟然无法直接改变背景的颜色 通常情况下:我们都可以通过改变元素的 background-color 的值来改变元素的背 ...

最新文章

  1. 身份证校验原理和PHP实现
  2. 3周第4次课 df、du命令 fdisk磁盘分区
  3. yield next和yield* next的区别
  4. android自定义渐变色,Android设置背景渐变色
  5. 系统缓存全解析 [转]
  6. 用Java写数据到POST请求
  7. EJB3.0异常总结---Exception in thread “main“ javax.naming.NameNotFoundException: StatelessEjbBean not bou
  8. install cuda on ubuntu
  9. 各种Windows版本下载
  10. iOS人脸识别(CoreImage)
  11. html中的换行符也占空间,如何解决
  12. 21个深度学习开源数据集分类汇总
  13. 接口测试用例怎么写?一文1600字教你写一个优秀的接口测试的测试用例
  14. 计算机3d开机号162期,彩吧福彩3D第162期试机号后分析总汇
  15. Three.js加载动画模型并控制播放
  16. 李在福羽毛球教学经典视频汇总31集
  17. Spring AOP 学习笔记
  18. MT360:工业级无线PDA(1维/2维条码/RFID/GPS/GSM/GPRS/WiFi/蓝牙)
  19. warning警告问题解决1
  20. .NET5发布,这个微软“全家桶”会是.NET的春天吗?

热门文章

  1. Spark基础学习笔记09:Scala变量与数据类型
  2. Java案例:Swing常用组件演示
  3. 【BZOJ2437】【codevs1949】兔兔与蛋蛋游戏,博弈+二分图匹配
  4. 【BZOJ1443】游戏Game,博弈+二分图匹配
  5. 复数基础—— i = 根号 -1 _3
  6. 树的重心 背诵用模板
  7. 每日小记2017.3.7
  8. 聚焦核心竞争力:自建与外购
  9. 在Unity内使用对象池并实现线程安全的单例模式
  10. php熊掌号怎么设置json-ld,织梦DEDECMS熊掌号JSON LD结构化数据代码分享