最近上公开课，讲到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上的两端对齐效果。 首先，...
本文将深入探讨如何使用CSS实现文本的两端对齐，特别是在处理中文文本时的挑战。 首先，`text-align` 属性是实现文本对齐的基础，它允许你控制元素内部的文本水平对齐方式。当设置为 `justify` 时，`text-align` 会...
CSS（层叠样式表）提供了多种方法来实现元素的右对齐，下面我们将详细探讨这些方法。 1. **浮动**： 浮动是CSS中一种早期的布局方式，通常用于创建多列布局。在标题中提到的代码片段中，`#tabsF ul` 使用了 `float...
auto :允许浏览器用户代理确定使用的两端对齐法则 inter-word :通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效 newspaper : 通过增加或减少字或字母之间的...
CSS中的text-justify属性用于在文本两端对齐时，控制单词间的额外间距，以达到视觉上的均匀分布。特别是当文本需要在指定宽度内强制对齐时，text-justify显得尤为重要。以下是关于CSS强制换行对齐实现方法的详细知识...
对于 Chrome，还需要考虑 `-webkit-text-align-last` 属性，以及使用伪元素和特定 CSS 规则来模拟两端对齐的效果。 以下是一个在不同浏览器中实现文本两端对齐的 CSS 示例： ```css .test1 { text-align: justify...
在 form 表单的前端布局中，我们经常需要将文本框的提示文本两端对齐，例如： 比较粗暴的做法是在需要隔离边距的文本中加标签，然后分别控制每个文字的边距，这种方法比直接加空格或者占位符更精准，我之前也都是...
本CSS教程提供了两种对齐方式即垂直居中对齐和底端对齐！更多内容请参考本站的CSS视频教程。 CSS使图片垂直居中的代码： <!DOCTYPE ...
本文将详细探讨如何通过CSS属性text-align:justify来实现网页文本的两端对齐，以及它在不同浏览器中的应用情况。 一、text-align:justify的使用 在CSS中，text-align属性用于设置元素内文本的对齐方式。当设置为...
"css左右居中对齐"是一个常见的需求，尤其是在构建响应式网站或设计用户界面时。本文将深入探讨如何使用CSS实现元素的水平居中对齐，并结合`test.html`文件中的示例进行说明。 首先，我们要理解CSS中的几种主要布局...
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table...
在网页设计中，为了美观和专业，英文文本的排版往往需要实现两端对齐和智能断行，这就需要用到`HyphenJS`。`HyphenJS`是一个JavaScript库，专门用于处理西文（如英文）的自动断行和连字符插入，以达到齐头尾的对齐...
Justify 是一个实现元素两端自适应对齐、均分宽度布局的javascript控件。控件对最后一行对齐做了处理，使最后一行的元素能居左依次与上一行的元素垂直对齐，并支持去除部分DOCTYPE下最后一行产生的空隙。控件为移动...
要想更好的理解 css， 尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清楚的概念。大多 IE 下的显示错误，就是源于 haslayout。 什么是 haslayout ？ haslayout 是Windows Internet Explorer渲染引擎...
在CSS中，对图片的对齐分为横向对齐和纵向对齐两种方式。 1. **设置图片的横向对齐** - 横向对齐是基于水平方向的调整，与文本对齐方式类似，包括左对齐、居中对齐和右对齐。 - CSS中，由于`<img>`标签本身不包含...
justify：两端对齐，均匀分布 list-style-type： none 无标记。 disc 默认。标记是实心圆。 circle 标记是空心圆。 square 标记是实心方块。 decimal 标记是数字。 decimal-leading-zero 0开头的数字标记。(01, 02...