html - 组织 HTML 文件的标题

标签 html css

<分区>


想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它.

关闭 6 年前

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

上一篇:html - 让文本位于侧面板旁边

下一篇:html - CSS 中的固定页脚效果(如固定图像)

相关文章:

html - <div> 内出现未知空白,没有填充或边距

javascript - SVG DOM 对象间距/重叠

javascript - 将 div 的高度设置为标题下剩余空间的 100%

jquery:.css 与附加到头部之间的速度差异?

css - 1px vs 瘦,IE vs Excel 问题

php - 响应式 Flex 框

html页面大小标准

javascript - 在输入字段内向 JavaScript 函数传递参数与从函数内部传递参数

jquery - 创建侧边菜单以在悬停时打开菜单(一次只能打开一个菜单)?

JavaScript execCommand ("HiliteColor") 取消高亮