Rumah > Artikel > hujung hadapan web > html怎样固定两个标签不换行显示
html怎样固定两个标签不换行显示
- WBOYasal
- 2021-11-25 10:08:375737semak imbas
方法：1、利用style属性给标签设置“display”样式，语法“a71a18f8728bc6fadd21a08860276ae6”；2、利用style属性给标签设置“float”样式，语法“484acbd70058fa3b2f46a14b4d10837a”。
本教程操作环境：windows7系统、HTML5版、Dell G3电脑。
html怎样固定两个标签不换行显示
1、在html中，block类型的标签默认情况下会在两边自动加上换行。而inline则不会。
利用标签的style属性给标签添加“display:inline;”样式就可以了，下面我们通过示例来看一下，示例如下：
<!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>输出结果：
如果没有给标签设置style属性的话，输出结果如下：
如此便固定住两个标签不换行显示了。
2、利用styl属性的“float:left;”样式设置元素左浮动也能够将两个元素固定不换行显示，示例如下：
<!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>输出结果：
推荐教程：《html视频教程》
Atas ialah kandungan terperinci html怎样固定两个标签不换行显示. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：html5怎样隐藏下划线Artikel seterusnya：html怎样设置div固定位置不变