Question

假设我在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>

Answer 1

由于<span>表现为内联容器，因此弄乱布局的元素是<h1>，它表现为块元素。只需将<h1>的显示更改为内联样式，例如内联，内联块或内联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文件的标题

1 个答案: