css实现两端对齐的3种方法

最新推荐文章于 2023-03-27 22:23:20 发布
最新推荐文章于 2023-03-27 22:23:20 发布
阅读量322 收藏
点赞数
原文链接：http://www.cnblogs.com/xiaofengyun/p/6612430.html
版权

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="monicaqin">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>css实现两端对齐的3种方法</title>
<style type="text/css">
body{
font-size:14px;
font-family: "微软雅黑";
}
*{
padding:0;
margin:0;
}
/*模块之间添加[空格/换行符/制表符]*/
.wraper{
width:1200px;
margin:0 auto;
}
h2{
margin:10px 0;
}
/*方法一：使用text-align:justify*/
.step {
text-align-last:justify;
text-align:justify;
width:600px;
margin:50px auto;
position:relative;
}
.step:after{
position:absolute;
top:50%;
left:0;
content:'';
height:1px;
margin-top:-0.5px;
background:#ddd;
width:100%;
z-index:-1;
}
.step span {
display:inline-block;
text-align-last:center;
text-align:center;
width:16px;
height:16px;
line-height:16px;
color:#fff;
border-radius:50%;
background:#000;
}
/*方法二:使用justify-content:space-between*/
.demo {
margin:30px 0 0 0;
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;
}
.demo a{
width:20%;
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;
}

/*方法二:使用column(多列布局)*/
.example{
margin:30px 0 0 0;
-webkit-column-count:6;
-moz-column-count:6;
column-count:6;
-webkit-column-gap:20px;
-moz-column-gap:20px;
column-gap:20px;
}
.example a{
display: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>
</head>
<body>
<div class="wraper">
<h2>使用text-align:justify</h2>
<hr/>
<p>模块内的元素之间为换行符</p>
<div class="step">
<span href="">1</span>
<span href="">2</span>
<span href="">3</span>
<span href="">4</span>
</div>
<p>模块内的元素之间为空格符</p>
<div class="step">
<span href="">1</span> <span href="">2</span> <span href="">3</span> <span href="">4</span> <span href="">5</span> <span href="">6</span>
</div>
<p>模块内的元素之间为无分隔符，justify不起作用</p>
<div class="step">
<span href="">1</span><span href="">2</span><span href="">3</span><span href="">4</span><span href="">5</span><span href="">6</span>
</div>
<h2>使用justify-content:space-between</h2>
<hr/>
<div class="demo">
<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>
<h2>使用column(多列布局)</h2>
<hr/>
<div class="example">
<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">40元</a>
<a class="link" href="#none">50元</a>
<a class="link" href="#none">60元</a>
</div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/xiaofengyun/p/6612430.html

dgsfg30210
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css两端对齐之div+css布局实现2端对齐的4种方法总结
12-30
div+css布局实现2端对齐是我们网页排版中经常会使用到的，这篇文章将总结一下可以实现的方法： html结构 实现demo里面的div通过Css进行2端对齐。 <div>1 <div>2 <div>3 1.margin负值的方式 该方法需要...
CSS 两行文字两端对齐与字符间距的处理
苏苏就是小苏苏的博客
07-06 3201
CSS 两行文字两端对齐与字符间距的处理
flex布局优化(两端对齐，从左至右)
秋来九月八
03-20 1万+
flex布局是前端常用的布局方式之一，但在使用过程中，我们总是感觉不太方便，因为日常开发中，大多数时候，我们想要的效果是这样的即左右两端对齐并顶满，小盒子左右间距一致，并且从左至右排布。今天主要就来讨论，通过css，有几种方式来实现，以及它们的优缺点。三种方式中，第二种方式最简单，但兼容性有限；第一种方式代码量不少，兼容性适中，而且的问题严重，最后一种方式，最推荐，虽然有一些计算，并且也要合理分配宽度，但其兼容性最好，基本没啥场景不能适用，正所谓一招鲜，吃遍天。
css如何实现文字两端对齐效果
weixin_49054076的博客
03-27 1万+
设置 text-align，并且设置伪元素 after或者 before的样式，伪元素中可以添加width:100%或padding-left:100%都可以实现我们所要的效果。想要实现文字两端对齐效果，可以使用CSS的text-align属性。数字和英文字母则需要使用空格间隔开，再使用上述两种方法之一，就可以实现文字两端对齐了！
css 文字两端对齐
热门推荐
千里之行，始于足下！
01-12 2万+
1、需求是这样的：用div+css实现一个表单，要求表单中，输入框前面的label文字都两端对齐,效果如下: 2、先贴出html代码： <div class="item-box"> <span>姓名：</span> <el-input v-model="name"></el-input> </div> <div class="item-box"> <span>电话号码：</span
两端对齐的CSS怎么写？
dageliuqing的博客
08-12 7006
在设计页面的时候会涉及到文本对齐的问题，默认情况下是靠左对齐的，但有些时候也乤靠右对齐。本文给大家介绍下css两端对齐，看看css两端对齐怎么设置，以及css中文本的对齐有哪些。一、css两端对齐怎么设置代码是： css两端对齐为了让效果更加明显，我们给div加了宽度和底色等，其中css两端对齐的代码是 text-align-last:justify 。大家如果想像文本两段对齐的话，在css里面加入这个属性代码就可以了，当然也可以结合具体情况设置其他的css样式，让整个效果更加好看。二、css中文本的对齐有
使用CSS
weixin_34279184的博客
10-19 187
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 selector {declaration1; declaration2; ... declarationN } 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被...
css文本两端对齐的实现代码
09-22
本文将深入探讨如何使用CSS实现文本的两端对齐，特别是在处理中文文本时的挑战。 首先，`text-align` 属性是实现文本对齐的基础，它允许你控制元素内部的文本水平对齐方式。当设置为 `justify` 时，`text-align` 会...
CSS columns实现两端对齐布局的示例代码
12-28
例如，我们想要实现3列元素两端对齐，中间间隙是30px，CSS代码为： .container { columns: 3 30px; } 叮咚，结束了，game over~ 简单到令人发指。 不要怀疑，看一个实时渲染的例子吧： <div class=zhang></div>...
css实现不同浏览器下兼容文本两端对齐
12-28
在 form 表单的前端布局中，我们经常需要将文本框的提示文本两端对齐，例如： 比较粗暴的做法是在需要隔离边距的文本中加标签，然后分别控制每个文字的边距，这种方法比直接加空格或者占位符更精准，我之前也都是...
css 文本两端对齐应用实例
01-19
auto :允许浏览器用户代理确定使用的两端对齐法则 inter-word :通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效 newspaper : 通过增加或减少字或字母之间的...
CSS强制换行对齐的实现方法
01-19
用CSS控制中英文字符强制换行并两端对齐，有效避免DIV的内容超出范围而改变网页布局，强制换行的功能很实用。 复制代码代码如下:<html><head><title>CSS强制换行对齐</title></head>&...
text-algin:justify实现文本两端对齐方法小结
09-24
最近在写页面的时候遇到了一个问题—当行文本双端对齐，大家都知道CSS属性中有一个“text-align:justify”，但是这个属性使用的时候，要求还是挺...这篇文章就给大家分享了text-algin:justify实现文本两端对齐的方法。
使用text-align:justify实现两端对齐一例
10-30
"使用text-align:justify...使用text-align:justify实现两端对齐是一种常用的方法，但是需要注意不同的浏览器对中文和英文的理解和处理方式。同时，也可以使用其他方法来实现两端对齐，例如使用content属性增加内容。
【原】css实现两端对齐的3种方法
weixin_34186128的博客
08-30 888
说到两端对齐，大家并不陌生，在word、powerpoint、outlook等界面导航处，其实都有一个两端对齐(分散对齐)的按钮，平时使用的也不多，我们更习惯与左对齐、居中对齐、右对齐的方式来对齐页面的文本或模块。   响应式网页设计出现以来，更多是使用百分比布自适应布局，特别是在移动端，两端对齐的方式显得越来越重要。那么，如何使用css实现两端对齐，相信很多同学会文本对齐的text-al...
CSS——两端对齐
NanChen的博客
06-14 1449
两端对齐
CSS实现两端对齐的几种方法
weixin_33966095的博客
08-04 177
2019独角兽企业重金招聘Python工程师标准>>> ...
css 实现两端对齐
最新发布
03-19
CSS实现两端对齐可以使用以下两种方法： 1. 使用Flexbox布局： - 将父容器的`display`属性设置为`flex`，并且设置`justify-content`属性为`space-between`。 - 这样子元素会在父容器中均匀分布，并且第一个子元素...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值