<分区>
假设我在 html 中有一个固定大小的标题,我想在其中组织四个单独的对象(尽管对象的类型并不是非常重要) - 一个图像 - 一些文字 - 一个按钮 - 另一个按钮
我希望它们全部排成一条线,宽度不对称,“有组织地”实现这一目标的最简单方法是什么。假设每个元素的高度大小合适。我正在寻找一个简单的解决方案作为起点。这是我到目前为止的示例代码
<html>
<body>
<div id = "container">
<div id = "header">
<span> <img src = "test.jpg"> <h1> Testing File </h1>
<button type = "button"> Button1 </button>
<button type = "button"> Button2 </button></span>
</div>
</div>
</body>
</html>
最佳答案
自 <span>
表现为内联容器,扰乱布局的元素是 <h1>
它表现为 block 元素。只需更改 <h1>
的显示即可到内联样式,例如 inline、inline-block 或 inline-flex。
<html>
<head>
<style type="text/css">
#header h1 {
display: inline;
}
</style>
</head>
<body>
<div id="container">
<div id="header" >
<span>
<img src="test.jpg"> <h1> Testing File </h1>
<button type="button"> Button1 </button>
<button type="button"> Button2 </button>
</span>
</div>
</div>
</body>
</html>
关于html - 组织 HTML 文件的标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38383178/