用div+css如何让字靠右对齐

html-css025

用div+css如何让字靠右对齐,第1张

可以用“text-align:right”让文字靠右对齐。

1、新建html文档,在body标签中添加div标签,为div设置一个id,这里以“demo”为例:

2、在div标签中添加文字,然后为div标签设置宽高和边框,这时默认情况下文字靠右对齐:

3、为div添加“text-align:right”,其中“text-align”指的是文本对齐方式,“right”指的是靠右对齐,这时网页中文字将会靠右对齐:

这里有一些临时的解决方案。

1) 简单点的使用padding使其“看上去”对齐。

比如: 这里比较适合宽度固定的场合,只要padding合适,效果还是不错的。

select {

padding: 0 0 0 20px

2) 使用一些UI库实现

比如jQueryUI

优点是可以解决select控制在各个浏览器界面不一致的问题。

3) 居右对齐: 可以使用rtl属性来来控制,

<select dir="rtl">

<option>Foo</option>

<option>bar</option>

<option>to the right</option>

</select>

4)写成CSS的话则为:

select {

direction: rtl

}

纯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.length>0){

                    $(o).css("width",parseInt($($(o).parent()).width()/2))

                }else{

                    console.log("找不到任何对象!")

                }

                break

            case "left-right" :

                $(o).css("text-align","right")

                if(o.length>0){

                    for(var i=0i<o.lengthi++){

                        $(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>

两种对齐的效果看下图: