在css中如何让文字显示方式从右边开始

html-css0357

在css中如何让文字显示方式从右边开始,第1张

在css中让文字显示方式从右边开始的操作方法和步骤如下:

1、首先,创建一个新的html文档,见下图红框中的内容,然后进入下一步。

2、其次,完成上述步骤后,可以更改文档的名称,见下图红框中的内容,然后进入下一步。

3、接着,完成上述步骤后,输入文本,见下图红框中的内容,然后进入下一步。

4、然后,完成上述步骤后,进一步设置以下文本的对齐方式,示例代码如下图所示,然后进入下一步。

5、最后,完成上述步骤后,在浏览器中预览,文本右对齐,见下图红框中的内容。这样,问题就解决了。

实现代码如下:

<div class="wrap">

<div class="img"></div>

<div class="notice">1</div>

</div>

<div class="wrap">

<div class="img"></div>

<div class="notice">12</div>

</div>

<div class="wrap">

<div class="img"></div>

<div class="notice">13</div>

</div>

<style>

.wrap {

width:50px

margin-bottom:10px

position:relative

}

.img {

width:50px

height:50px

border:1px solid #000

}

.notice {

width:20px

height:20px

line-height:20px

font-size:10px

color:#fff

text-align:center

background-color:#f00

border-radius:50%

position:absolute

right:-10px

top:-10px

}

</style>

扩展资料:

注意事项

主要用到position定位,CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。

static是position的默认值。

<!DOCTYPE html>

<html lang="en">

<head>   

<meta charset="UTF-8">   

<title>CSS-position-static</title>   

<link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">

  <style>

      .container{

         background-color: #868686

           width: 100%

           height: 300px

       }

       .content{

           background-color: yellow

           width: 100px

          height: 100px

           position: static

           left: 10px/* 这个left没有起作用 */

       }

   </style>

</head>

<body>

  <div class="container">

       <div class="content"> 

       </div>

   </div>

</body>

</html>