css两端对齐_css文字两端对齐 - CSDN
精华内容
参与话题
  • css3实现两端对齐

    万次阅读 2016-02-14 17:34:46
    box-pack是css3的新属性,依赖于display:box(旧版弹性布局),受box-orient影响,box-pack决定...使用box-pack:justify来实现两端对齐非常简单,代码量也少。 实现代码如下:   *{ margin: 0;

    方法一:使用box-pack的justify实现:使用display:flex弹性盒子模型实现根据窗口大小自适应宽度。代码如下:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    			<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.container{
    				display: -webkit-box;
    				display: -webkit-flex;
    				display: -ms-flexbox;
    				display: flex;
    				margin-top: 30px;
    			    -webkit-box-pack: justify;
    			    -webkit-justify-content: space-between;
    			    -ms-flex-pack:justify ;
    			    justify-content: space-between;
    			}
    		   .container a{
    		   	width:20%;
    		   	display: block;
    		   	height: 50px;
    		   	line-height: 45px;
    		   	text-align: center;
    		   	border 1px solid red;
    		   	color: sandybrown;
    		   	font-size: 16px;
    		   	margin-bottom: 5px;
    		   	border-radius: 3px;
    		   	background-color: skyblue;
    		    text-decoration: none;
    		   }	
    		</style>
    	</head>
    	<body>
    		<div class="container">
    			<a class="link" href="#">10</a>
    			<a class="link" href="#">20</a>
    			<a  class="link" href="#">30</a>
    			<a class="link" href="#">50</a>
    			
    		</div>
    	</body>
    </html>
    
    效果如下:


    方法二:使用column多列 布局实现,具体代码如下:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    				<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    		<title></title>
    		<style>
    			*{margin: 0;padding: 0;}
    		  .container{
    		  	-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;
    		  	-webkit-column-gap: 20px;-moz-column-gap: 20px;column-gap: 20px;
    		  	 	margin-top: 100px;
    		  }
    		  .container a{
    		  	
    		  	display: block;
    		  	height: 50px;
    		 
    		  	line-height: 50px;
    		  	text-align: center;
    		  	border: 1px solid sandybrown;
    		  	color: #0066CC;
    		  	font-size: 16px;
    		  	margin-bottom: 5px;
    		  	border-radius: 4px;
    		  	background-color: salmon;
    		  	text-decoration: none;
    		  }
    		</style>
    	</head>
    	<body>
    		 <div class="container">
    	 <a class="link" href="#none">10元</a>
        <a class="link" href="#none">20元</a>
        <a class="link" href="#none">30元</a>
        <a class="link" href="#none">50元</a>
    		 </div>
    	</body>
    </html>
    
    效果如下:






    展开全文
  • CSS实现两端对齐

    2018-11-24 11:18:01
    div{text-align: justify; } div:after{display: inline-block ; content: ''; padding-left: 100%; } div、lable、span等都可以实现。
    div{text-align: justify; }
    div:after{display: inline-block ; content: ''; padding-left: 100%; }

    div、lable、span等都可以实现。

    展开全文
  • css文本两端对齐样式

    2019-04-08 17:58:15
    text-align:justify,最后一行不会两端对齐 1. text-align:justify;文字两端对齐;但是最后一行不会两端对齐,所以用::after让内容不是最后一行。 <!DOCTYPE html> <html> <head lang="en"&...

    实用场景:

     

    text-align:left

    text-align:justify,最后一行不会两端对齐

    1. text-align:justify;文字两端对齐;但是最后一行不会两端对齐,所以用::after让内容不是最后一行。

    
    <!DOCTYPE html>
    
    <html>
    
    <head lang="en">
    
      <meta charset="UTF-8">
    
      <title>文本两端对齐</title>
      <style>
        .label {
          display: inline-block;
          height: 100%;
          width: 100px;
          text-align: justify;
          vertical-align: top;
        }
        .label::after {
           display: inline-block;
           width: 100%;
           content: '';
           height: 0;
         }
      </style>
    </head>
    
    <body>
    <div class="row">
      <span class="label">姓名</span>:
      <span class="value">李小明</span>
    </div>
    <div class="row">
      <span class="label">出生年月</span>:
      <span class="value">1995-12-01</span>
    </div>
    <div class="row">
      <span class="label">性别</span>:
      <span class="value">女</span>
    </div>
    
    
    </body>
    
    </html>
    

    2.利用 text-align-last: justify 样式来完成

    
    <!DOCTYPE html>
    
    <html>
    
    <head lang="en">
    
      <meta charset="UTF-8">
    
      <title>文本两端对齐</title>
      <style>
         .label {
            display: inline-block;
            height: 100%;
            min-width: 100px;
            text-align: justify;
            text-align-last: justify;
            margin-bottom:20px
        }
        .value {
            padding-right: 10px;
        }
      </style>
    </head>
    
    <body>
    <div class="row">
      <span class="label">姓名</span>:
      <span class="value">李小明</span>
    </div>
    <div class="row">
      <span class="label">出生年月</span>:
      <span class="value">1995-12-01</span>
    </div>
    <div class="row">
      <span class="label">性别</span>:
      <span class="value">女</span>
    </div>
    
    
    </body>
    
    </html>
    

     

    展开全文
  • CSS文字两端对齐

    千次阅读 2019-02-20 14:19:55
    微信小程序—-CSS文字两端对齐 场景—-在微信小程序的表单开发中常遇到 input 的 label 需要进行文字的两端对齐! 参考:真正可用的CSS文字两端对齐 由于真正可用的CSS文字两端对齐需要放置一个空标签,...

    WXRUI体验二维码

    WXRUI体验码

    微信小程序----CSS文字两端对齐

    • 场景----在微信小程序的表单开发中常遇到 input 的 label 需要进行文字的两端对齐!

    • 参考:真正可用的CSS文字两端对齐

      由于真正可用的CSS文字两端对齐需要放置一个空标签,本人对此处进行了优化处理,利用伪元素 after 代替空标签 span,来实现该效果,同时将两端对齐的样式提成公用样式的 class ,需要时直接使用。


    效果图

    CSS文字两端对齐效果图


    实现

    wxss

    .rui-justify{text-align: justify;}
    .rui-justify::after{
      content: '';
      display: inline-block; 
      padding-left: 100%;
    }
    

    wxml

    <view class='rui-form-li'>
        <view class='rui-form-li-name rui-justify'>姓名</view>
        <view class='rui-form-li-input'><input name="name" placeholder='请填写您的真实姓名' value=''></input></view>
    </view>
    

    WXRUI体验二维码

    WXRUI体验码


    DEMO下载

    我的博客,欢迎交流!

    我的CSDN博客,欢迎交流!

    微信小程序专栏

    前端笔记专栏

    微信小程序实现部分高德地图功能的DEMO下载

    微信小程序实现MUI的部分效果的DEMO下载

    微信小程序实现MUI的GIT项目地址

    微信小程序实例列表

    前端笔记列表

    游戏列表

    展开全文
  • 最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果。在网上搜索了一下,差不多都是互相转帖,用的都是类似的技巧: text-align:justify; text-justify:inter-ideograph; 但问题是,我怎么就看...
  • CSS实现文本两端对齐

    千次阅读 2019-06-14 13:48:05
    text-align: justify实现两端对齐文本效果。 但是对最后一行是无效的(因此对单行文本也是无效的), 那要实现上面的效果,我们就要新增一行,使其不再是最后一行。 <template> <div style="padding: ...
  • CSS实现两端对齐(及原理)

    千次阅读 2019-03-14 16:37:31
    中文两端对齐&lt;span&gt;&lt;/span&gt;&lt;/div&gt; &lt;div class='row'&gt;中文ok&lt;span&gt;&lt;/span&gt;&lt;/div&gt; &lt;/div&gt
  • css3 实现两端对齐

    千次阅读 2018-10-25 19:25:43
    HTML:  &lt;ul class="person-info"&gt; &lt;li&gt; &lt;div class="photo"&gt; &lt;img src="../../../assets/img/Path.png"...
  • CSS各种对齐代码,左对齐、右对齐、中间对齐、底部对齐、两端对齐等,代码简单 /*CSS代码:*/ /*左对齐*/ .left { text-align: left; border: 1px dotted black; width: 50%; } /*右对齐*/ .right { text-...
  • css3,居中文字,居中对齐,文字两端对齐 一.文字居中对齐: 1.text-align:center; 二.文字两端对齐: 1.text-align:justify;
  • 小技巧|CSS如何实现文字两端对齐

    千次阅读 2018-05-10 10:00:20
    需求如下,红框所在的文字有四个字的、三个字的、两个字的,如果不两端对齐可以选择居中对齐,或者右对齐。但是如果要像下面这样两端对齐呢?我相信以前很多人都这么干过:两个字中间使用 来隔开达到四个字的宽度,...
  • CSS实现多行文字两端对齐的效果

    万次阅读 2018-11-25 22:24:44
    CSS实现多行文字两端对齐的效果 文章来源:本站原创 浏览次数:248 发布日期:2013-09-13 在做前台界面的时候,比如一些文字的列表或者一些表单的标题,经常是2个字,3个字,4个字的类型。 一般对齐就是在中间打...
  • 布局上要求两端对齐,且最后一行在列不满的情况下要求左对齐,使用flex的justify-content: space-between; 实现时发现最后一行不能左对齐,而是两端对齐方式。 # 网上查了一些资料,有两种方法可以实现效果: **1...
  • CSS: { word-break: keep-all; word-wrap: break-word; // 只对英文起作用,以单词作为换行依据。... white-space: pre-wrap; //只对中文起作用,强制... //css英文语句的两端对齐: text-justify:inter-ideo...
  • 参考: https://blog.csdn.net/zgpeterliu/article/details/80094869 PS: !!!!注意必须是文字,如果是数字或者abc这种会聚在一起 各个浏览器我都试了是没问题的,如果有问题请留言告知。... t...
  • 中 国 人 中国人民 该方法能兼容ie和firefox。
  • css实现文字两端对齐(兼容)

    千次阅读 2013-09-28 16:24:42
    今天做一个项目,客户要求文章文字两端对齐,一开始使用了 text-align:justify; text-justify:distribute-all-lines;发现在chrome下正常, IE下不足一行的文字也被强行两端对齐,非常不友好, 后来一查资料发现,...
  • table表单中的td内容两端对齐

    万次阅读 2016-04-15 15:44:35
    在td中加上以下样式text-align:center; text-align:justify; text-justify:distribute-all-lines; text-align-last:justify实例 <title>td两端对齐 td{ bor
  • text-align: justify; text-justify: newspaper; word-break: break-all;  
  • CSS 实现文字两端对齐

    万次阅读 2017-03-17 08:54:42
    text-align:justify 属性是全兼容的,使用它实现两端对齐,需要注意在模块之间添加[空格/换行符/制表符]才能起作用,同样,实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用(android/ios)解决...
1 2 3 4 5 ... 20
收藏数 19,809
精华内容 7,923
关键字:

css两端对齐