最近上公开课，讲到css的两端对齐，准备写一下心得记录一下。
css两端对齐的两种方式:(原文参见白树大神）
http://www.cnblogs.com/PeunZhang/p/3289493.html#text-justify-demo
方法一：使用text-align:justify
先看代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两端对齐</title>
</head>
<body>
<div class="demo">
<a class="link" href="#">1</a>
<a class="link" href="#">2</a>
<a class="link" href="#">3</a>
<a class="link" href="#">4</a>
<a class="link" href="#">5</a>
<a class="link" href="#">6</a>
<a class="link" href="#">7</a>
</div>
</body>
css
<style type="text/css">
*{margin:0;padding:0;}
.demo{
text-align:justify;
text-align-last:justify;
line-height:0;
height:44px;
}
}
.demo:after{
display:inline-block;
overflow:hidden;
width:100%;
height:0;
content:'';
vertical-align:top;
}
.demo a{
width:5%;
display:inline-block;
height:44px;
line-height:44px;
text-align:center;
border:1px solid #428cc8;
color:#666;
font-size:16px;
margin-bottom:5px;
border-radius:3px;
background-color:#fefefe;
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee));
color:#666;
text-decoration:none;
}
</style>
text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用。
然而，尝试之后发现，设置text-align:justify后并没有实现两端对齐的效果。百度之后发现，text-align非常之傲娇，因为它
一行文本不进行处理，还有就是强制换行的也不处理。不会处理被打断的行和最后一行。
那么，1.使用text-align-last，然而这个只有IE支持。(火狐为-moz-text-align-last)
2.使用:after选择器，生成空内容块级元素宽度为100%的一行。于是便有了上面的代码。[align=center][/align]
方法二：使用justify-content:space-between
设置为盒模型，设置justify-content为space-between
.demo{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
}
分享到：
相关推荐
3. **CSS样式**：为了使文字两端对齐生效，我们需要在ECharts的`grid`或者`textStyle`中添加对应的CSS样式。注意，由于ECharts的标签是内联元素，因此`text-align: justify;`可能无法直接应用。可以使用以下技巧实现...
"火狐、ie中英文两端对齐"的问题主要涉及到CSS样式设置，尤其是文本对齐属性（text-align）的应用。在这篇文章中，我们将深入探讨这个问题，以及如何通过调整CSS来实现中英文在火狐和IE上的两端对齐效果。 首先，...
div+css布局实现2端对齐是我们网页排版中经常会使用到的，这篇文章将总结一下可以实现的方法： html结构 实现demo里面的div通过Css进行2端对齐。 <div>1 <div>2 <div>3 1.margin负值的方式 该方法需要...
本文将深入探讨如何使用CSS实现文本的两端对齐，特别是在处理中文文本时的挑战。 首先，`text-align` 属性是实现文本对齐的基础，它允许你控制元素内部的文本水平对齐方式。当设置为 `justify` 时，`text-align` 会...
CSS（层叠样式表）提供了多种方法来实现元素的右对齐，下面我们将详细探讨这些方法。 1. **浮动**： 浮动是CSS中一种早期的布局方式，通常用于创建多列布局。在标题中提到的代码片段中，`#tabsF ul` 使用了 `float...
兜兜转转一大圈，最后发现实现两端对齐布局方式最简单的居然是使用CSS columns多栏布局。 例如，我们想要实现3列元素两端对齐，中间间隙是30px，CSS代码为： .container { columns: 3 30px; } 叮咚，结束了，game ...
auto :允许浏览器用户代理确定使用的两端对齐法则 inter-word :通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效 newspaper : 通过增加或减少字或字母之间的...
CSS中的text-justify属性用于在文本两端对齐时，控制单词间的额外间距，以达到视觉上的均匀分布。特别是当文本需要在指定宽度内强制对齐时，text-justify显得尤为重要。以下是关于CSS强制换行对齐实现方法的详细知识...
对于 Chrome，还需要考虑 `-webkit-text-align-last` 属性，以及使用伪元素和特定 CSS 规则来模拟两端对齐的效果。 以下是一个在不同浏览器中实现文本两端对齐的 CSS 示例： ```css .test1 { text-align: justify...
在 form 表单的前端布局中，我们经常需要将文本框的提示文本两端对齐，例如： 比较粗暴的做法是在需要隔离边距的文本中加标签，然后分别控制每个文字的边距，这种方法比直接加空格或者占位符更精准，我之前也都是...
在Android开发中，实现两端对齐布局是常见的需求，特别是在显示文本内容时。本实例将详细讲解如何在Android应用中实现两端对齐效果，主要涉及到`WebView`组件的使用。 首先，两端对齐通常指的是文本内容在容器内...
本CSS教程提供了两种对齐方式即垂直居中对齐和底端对齐！更多内容请参考本站的CSS视频教程。 CSS使图片垂直居中的代码： <!DOCTYPE ...
"css左右居中对齐"是一个常见的需求，尤其是在构建响应式网站或设计用户界面时。本文将深入探讨如何使用CSS实现元素的水平居中对齐，并结合`test.html`文件中的示例进行说明。 首先，我们要理解CSS中的几种主要布局...
本案例通过两个具体的实例详细介绍了如何使用CSS来实现图片的横向和纵向对齐。 首先，我们来看第一个案例，这是关于图片横向对齐的展示。在HTML中，我们可以使用`<p>`标签来创建段落，并通过内联样式或者外部样式表...
text-align:justify与...但是这对于多行文本（即有文本换行）除了最后一行都可以实现两端对齐，最后一行依旧左对齐。所以就需要控制最后一行文本对齐方式的CSS属性：text-align-last。 2.text-align-last text-align-l
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table...
在网页设计中，为了美观和专业，英文文本的排版往往需要实现两端对齐和智能断行，这就需要用到`HyphenJS`。`HyphenJS`是一个JavaScript库，专门用于处理西文（如英文）的自动断行和连字符插入，以达到齐头尾的对齐...