Home > Web Front-end > CSS Tutorial > How to display a link on the right in css

How to display a link on the right in css

WBOY
Release: 2021-11-30 15:44:40
Original
4603 people have browsed it

In CSS, you can use the float attribute to set a link to be displayed on the right. This attribute can define the direction in which the element floats. When its value is set to "right", the element will be displayed on the right. The syntax is "a{float:right;}".

How to display a link on the right in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to display a link on the right in css

We can set a link to display on the right through the float attribute.

The float attribute defines in which direction the element floats. Historically this property has always been applied to images, causing the text to wrap around the image, but in CSS, any element can be floated. A floated element creates a block-level box, regardless of what type of element it is.

If floating non-replaced elements, specify an explicit width; otherwise, they are made as narrow as possible.

Let’s take a look at it through an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    a{
      float:right;
    }
    </style>
</head>
<body>
<a href="https://www.php.cn/" target="_blank">这是一个a标签</a>
</body>
</html>
Copy after login

Output result:

How to display a link on the right in css

(Learning video sharing: css video tutorial )

The above is the detailed content of How to display a link on the right in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template