css - 使用没有表格的 CSS 定位按钮

Question

我在这里拉头发，试图让 CSS 只定位少数几个 html 元素。

这是代码：http: //jsfiddle.net/7pTL8/

我想要的是“person@business.com [v]”位于右上角，然后在其下方“平均深度”、“[x] 设置”和“过去 24 小时 [v]”都显示一起处于同一水平。我试过浮动，结果很奇怪。我不想在这里使用表格，因为我读到的关于 CSS 的所有内容都建议使用表格进行布局是一个糟糕的解决方案。

Answer 1

它不像你想的那样凝灰岩..这是一个小解决方案..它不是很好但它现在可以解决你的问题..

[链接] http://jsfiddle.net/7pTL8/2/

<div id="user-selection">person@business.com [v]</div>
<div id="settings-container">
 <h1 id="graph-title">Average Depth</h1>
<span id="settings-button">[x] Settings</span>
<span id="timeframe-dropdown">Past 24 hours [v]</span>
</div>

CSS

​#graph-title {
   position:absolute;
   left:1px;
   text-align: left;
}

#settings-container {
   text-align: right;
   }    

 #user-selection {
    text-align: right; 
  }

​</p>

Answer 2

<span>元素使用display:inline，而<h1>元素block默认使用。手动覆盖要使用的#graph-title，display:inline它将与您的其余元素对齐：

#graph-title
{
    display:inline;       
}
​

Answer 3

您的问题可能是h1元素的使用。默认情况下h1具有样式display: block. 如果添加样式display: inline就可以了。

编辑：span如果您没有任何特殊原因， 我认为您应该使用它。