如何用css实现文字单行右对齐 多行左对齐 ? 无兼容问题的
目前我的实现DEMO是 http://runjs.cn/code/ljpna9lz
有兼容问题,苹果手机打开没有问题, 有些安卓手机打开只有左对齐.
如何用css实现文字单行右对齐 多行左对齐 ? 无兼容问题的
目前我的实现DEMO是 http://runjs.cn/code/ljpna9lz
有兼容问题,苹果手机打开没有问题, 有些安卓手机打开只有左对齐.
稍微改动了一下你的demo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<style>
*{
margin: 0;
padding: 0;
}
.a {
margin-top: 20px;
width: 200px;
height: 50px;
background: blue;
color: #fff;
font-size:15px;
}
.a > p {
line-height: 20px;
min-height: 20px;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
</style>
</head>
<body>
<div class="a">
<p class="box">文字文字</p>
</div>
<div class="a">
<p class="box">文字文字文字文字文字文字文字文字</p>
</div>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script>
$('.box').each(function(){
var i = $(this).height();
if (20 >= i) {
$(this).addClass('right')
} else {
$(this).addClass('left')
}
})
</script>
</html>
或者left这个class可以不要,因为默认情况就是左对齐
插一句,貌似你对inline-block的理解不是很好,如果把一个元素display成inline-block时最好给它再设置一下vertical-align,不然可能会出现你不想看到的效果
10 回答11.7k 阅读
2 回答3.2k 阅读✓ 已解决
5 回答2.2k 阅读
3 回答1.7k 阅读✓ 已解决
5 回答798 阅读
4 回答2.2k 阅读✓ 已解决
3 回答1.2k 阅读✓ 已解决