label标签内的文字如何向右对齐？

_vivy_

已于 2024-05-08 22:55:03 修改

阅读量572

点赞数 7

分类专栏： Bootstrap3 Spring Boot----shop项目文章标签：前端 html bootstrap

于 2024-04-17 15:52:49 首次发布

本文链接：https://blog.csdn.net/m0_60528611/article/details/137872805

版权

Spring Boot----shop项目同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Bootstrap3

2 篇文章 0 订阅

订阅专栏

问题描述：

在不改变原有bootstrap4:4:4的布局下，尝试让label标签内的文字没有向右对齐

HTML代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column" style="margin-top: 150px">
            <div style="font-size: 30px; text-align: center; margin-bottom: 30px">注册页面</div>
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">账号*</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="请输入账号"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">密码*</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword3" placeholder="请填写密码"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">确认密码*</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputPassword3again" placeholder="请确认密码"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary btn-lg btn-block" >注册</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
</div>
</body>
</html>

解决方法：

<div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">确认密码*</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputPassword3again" placeholder="请确认密码"/>
        </div>
</div>

将以上代码块替换为

<div class="form-group">
    <label for="inputPassword3" style="float: left; margin-right: 3px; margin-top: 5px;">确认密码*</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputPassword3again" placeholder="请确认密码"/>
        </div>
</div>

原理：将<label>标签自带的类删除，去掉其属性值，重新设置其属性布局。原本的标签无论如何修改其属性都会存在旁边的input组件换行导致布局错乱。修改代码后效果如下

后续解决方法：可修改<label>和<div>的class属性，改变后缀数字也可以达到同样的效果，并且更加方便简洁

<div class="form-group">
    <label for="inputEmail" class="col-sm-3 control-label">账号*</label><
        <div class="col-sm-7">
            <input type="email" class="form-control" id="inputEmail" placeholder="请输入账号"/>
        </div>
</div>

_vivy_

关注

7
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
label标签内的文字如何向右对齐？

原理：将标签自带的类删除，去掉其属性值，重新设置其属性布局。原本的标签无论如何修改其属性都会存在旁边的input组件换行导致布局错乱。在不改变原有bootstr4:4:4的布局下，尝试让label标签内的文字没有向右对齐。
复制链接

扫一扫