Fork me on GitHub

让DIV不换行

一,单个DIV:

1. 用nobr元素

1
2
3
4
5
6
7
<html>
<head>
</head>
<body>
<div><nobr>不换行不换行<nobr></div>
</body>
</html>

2. 用nowrap元素

1
2
3
4
5
6
7
<html>
<head>
</head>
<body>
<div nowrap>div不换行div不换行div不换行</div>
</body>
</html>

二,两个DIV

1. 用CSS里的float属性

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<style type="text/css">
div#row1 { float: left; color: blue; }
div#row2 { color: red }
</style>
</head>
<body>
<div id="row1">第一个div</div>
<div id="row2">第二个div不换行</div>
</body>
</html>

2. 用CSS里的diplay属性

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<title>CSS中的不换行</title>
<style type="text/css">
div#row1 { color: blue;display: inline }
div#row2 { color: red;display: inline }
</style>
</head>
<body>
<div id="row1">第一个div</div>
<div id="row2">第二个div不要换行</div>
</body>
</html>

相关文章推荐

如果觉得我的文章对您有用,可否请我喝杯速溶咖啡