我正在尝试制作一行 div，其中每个 div 有两行。我有以下代码:
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Row of Divs</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div class="inline">
<div class="block">
<p>
ABC
<br>
DEF
</p>
</div>
<div class="block">
<p>
GHI
<br>
JKL
</p>
</div>
<div class="block">
<p>
MNO
<br>
PQR
</p>
</div>
<div class="block">
<p>
STU
<br>
VWX
</p>
</div>
</div>
</body>
</html>
样式.css
div.inline{
display: inline;
}
div.block{
display: block;
}
所以我想要以下输出:
ABC GHI MNO STU
DEF JKL PQR VWX
但我得到以下输出:
ABC
DEF
GHI
JKL
MNO
PQR
STU
VWX
如何修复我的代码以保持内联为一行，如上所示？
最佳答案
像这样: https://jsfiddle.net/ar97yzqv/1/ CSS:
.inline{
display: inline;
}
.block{
display: inline-block;
}
关于html - 如何用行制作一行 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29549947/