正文
css样式右对齐,css div右对齐
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
使用CSS样式...将多行文字右端对齐；例如：第一行文字：哥哥 第二行文字：你哥哥
纯css没法实现，除非你的元素宽度完全写死，那样的话会有很多问题，还是用js来实现吧，我写的这个需要引入jquery
div id="main"
p class="tocenterRight"哥哥/p
p class="tocenterRight"你哥哥/p
p class="tocenterRight"你的大哥哥/p
/div
script src="jquery-3.2.1.min.js" type="application/javascript"/script
script
$(document).ready(function(){
//传入type参数center-right 或者left-right 可以传入以后看下效果，第二个参数是要做对其的类名，自己测试一下。
textAlign("center-right",".tocenterRight");
});
var textAlign = function(type,classname){
var o = $(classname);
var maxwidth = 0;
switch (type){
case "center-right" :
$(o).css("text-align","right");
if(o.length0){
$(o).css("width",parseInt($($(o).parent()).width()/2));
}else{
console.log("找不到任何对象！");
}
break;
case "left-right" :
$(o).css("text-align","right");
if(o.length0){
for(var i=0;io.length;i++){
$(o[i]).css("display","inline");
maxwidth = parseInt($(o[i]).css("width"))maxwidth ? parseInt($(o[i]).css("width")) : maxwidth;
}
$(o).css("display","block");
$(o).css("width",maxwidth);
}else{
console.log("找不到任何对象！");
}
break;
default :
break;
}
}
/script
两种对齐的效果看下图：
相关问答
Q1: div+css怎么居左居右剧中
1、居左：
对要靠左对齐（局左）的div样式加float:left。
示例代码：
css部分：
style
.divcss5-left{float:left;width:250px;height:50px;border:1px solid #F00}
/style
HTML部分：
div class="divcss5-left"此DIV靠左对齐显示/div
2、居右：
对要靠右对齐（局右）的div样式加float:right。
示例代码：
css部分：
style
.divcss5-right{float:left;width:250px;height:50px;border:1px solid #F00}
/style
HTML部分：
div class="divcss5-right"此DIV靠右对齐显示/div
3、居中：
对要居中对齐的div样式加margin:0 auto，不再需要加float样式。
示例代码：
css部分：
style
.divcss5-cent{margin:0 auto;width:250px;height:50px;border:1px solid #F00}
/style
div class="divcss5-cent"此DIV居中右对齐显示/div
扩展资料：
CSS清除浮动：
浮动：因为使用了float:left或float:right或两者都是有了而产生的浮动。
对父级设置适合CSS高度：
对父级设置适合高度样式清除浮动，一般设置高度需要能确定内容高度才能设置。
示例代码：
css部分：
.divcss5{ width:400px;border:1px solid #F00;background:#FF0; height:102px}
.divcss5-left,.divcss5-right{width:180px;height:100px;
border:1px solid #00F;background:#FFF}
divcss5-left{ float:left}
.divcss5-right{ float:right}
HTML部分：
div class="divcss5"
div class="divcss5-left"left浮动/div
div class="divcss5-right"right浮动/div
/div
[img]Q2: 如何用CSS将select/option文本居中或居右对齐
这里有一些临时的解决方案。
1) 简单点的使用padding使其“看上去”对齐。
比如： 这里比较适合宽度固定的场合，只要padding合适，效果还是不错的。
select {
padding: 0 0 0 20px;
2） 使用一些UI库实现
比如jQueryUI
优点是可以解决select控制在各个浏览器界面不一致的问题。
3） 居右对齐： 可以使用rtl属性来来控制，
select dir="rtl"
optionFoo/option
optionbar/option
optionto the right/option
/select
4）写成CSS的话则为：
select {
direction: rtl;
}
Q3: Flex 如何让最后一项右边对齐？（CSS）
Flex 中使用 justify-content, 规定项目之间的对其方法，如果要让最后一项向右边对齐
有一个简单的方法，在最后一项元素使用样式：
margin-left: auto;
Q4: 如何实现CSS右对齐
如果一个div里面包含多个标签，使用text-align:right就可以了（意为内容右对齐）
Q5: 用div+css如何让字靠右对齐
可以用“text-align:right;”让文字靠右对齐。
1、新建html文档，在body标签中添加div标签，为div设置一个id，这里以“demo”为例：
2、在div标签中添加文字，然后为div标签设置宽高和边框，这时默认情况下文字靠右对齐：
3、为div添加“text-align:right;”，其中“text-align”指的是文本对齐方式，“right”指的是靠右对齐，这时网页中文字将会靠右对齐：
