当前位置：文江博客话题详情

JavaScript CSS HTML HTML5 SASS

如何用css实现文字单行右对齐多行左对齐 ? 无兼容问题的

发布于 2022-09-05 22:46:11 字数 186 浏览 5 评论 0

如何用css实现文字单行右对齐多行左对齐 ? 无兼容问题的

目前我的实现DEMO是 http://runjs.cn/code/ljpna9lz
有兼容问题，苹果手机打开没有问题, 有些安卓手机打开只有左对齐.

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（4）

泪冰清 2022-09-12 22:46:11

.b {
                display: inline-block;
                text-align: left;
            }

向地狱狂奔 2022-09-12 22:46:11

.b {
          display: inline-block;
         text-align: left;
         float:right;
            }

染年凉城似染瑾 2022-09-12 22:46:11

图片描述

你要的是这个效果吗？我刚好在写

再见回来 2022-09-12 22:46:11

稍微改动了一下你的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，不然可能会出现你不想看到的效果

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

淡笑忘祈一世凡恋

文章 0 评论 0

我们的影子

文章 0 评论 0

素年丶

文章 0 评论 0

南笙

文章 0 评论 0

18215568913

文章 0 评论 0

qq_xk7Ean

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文