How to fix two tags in html without wrapping them-HTML Tutorial-php.cn

How to fix two tags in html without wrapping them

WBOY

Release： 2021-11-25 10:08:37

Original

5856 people have browsed it

Method: 1. Use the style attribute to set the "display" style for the label, the syntax is ""; 2. Use the style attribute to set the "float" style for the label , the syntax is "".

How to fix two tags in html without wrapping them

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

htmlHow to fix two tags to display without wrapping

1. In html, block type tags will be automatically displayed on both sides by default Add line breaks. But inline does not.

Just use the style attribute of the tag to add the "display:inline;" style to the tag. Let's take a look at it through an example. The example is as follows:

<!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>
</head>
<body>
    <h3 style="display:inline;">测试标签1</h3>
    <h3 style="display:inline;">测试标签2</h3>
</body>
</html>

Copy after login

Output result:

How to fix two tags in html without wrapping them

If the style attribute is not set for the tag, the output result is as follows:

How to fix two tags in html without wrapping them

This fixes the two tags and displays them without wrapping. .

2. Using the "float:left;" style of the styl attribute to set the element to left floating can also fix the two elements and display them without wrapping. The example is as follows:

<!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>
</head>
<body>
    <h3 style="float:left;">测试标签1</h3>
    <h3 style="float:left;">测试标签2</h3>
</body>
</html>

Copy after login

Output result:

How to fix two tags in html without wrapping them

Recommended tutorial: "html video tutorial"

The above is the detailed content of How to fix two tags in html without wrapping them. For more information, please follow other related articles on the PHP Chinese website!