在 div 标签中将内容放置在最右侧

Question

我有一些HTML代码片段

<div id="title">This is title<span id="close">X<span><div> 

这个 div 的宽度是动态的，可能是 300、600 或 800 像素。我希望 "X" 在 div 最右侧与同一行。因此，请编写类似以下的 CSS：

#close
{
   margin-right:10px;
}

但是它不起作用。如果我想要实现它，我应该配置什么？

最好的祝福。

- Yongwei Xing

Answer 1

<div id="title"><div class="float-right"><span id="close">X</span></div>This is title</div> 

以及类(class)

.float-right{
float:right;
}

- Bipul

---

如果你想让X在极右边的右侧大约10或20像素，可以在float-right类中使用margin-right。 - Bipul

Answer 2

使用绝对定位。

#title {position: relative; width: 300px}
#close {position: absolute; top: 5px; right: 5px} /* adjust based on required margin */

但请记住，绝对定位的内容在盒模型之外，可能会重叠在 title div 内的内容上。您需要设置适当的填充/边距来避免这种情况。

- Chetan S

Answer 3

试试这个：

<div id="title">This is title<div><span id="close">X<span></div><div> 

以及样式：

#title div {
  text-align: right;
  float: right;
  clear: none;
}

或者您可以完全摆脱这个 span 标签，只使用 div 标签，将其设为 20 像素宽，并使用不同的颜色进行样式设置，使其看起来更像一个按钮。

我会在图像中使用 img 元素来添加关闭按钮，但每个人有自己的做法。

其他排列方式：

<div id="title"><div style="width:20px"><span id="close">X<span></div>This is title<div> 

- Robusto

---

嗨，现在的“X”在最右边，但它不与标题在同一行，而是移到了第二行。 - Yongwei Xing

给这个 div 设置一个宽度，比如说 20px。这样就可以了。确保你也设置了 float:right 和 clear:none。你还可以尝试将这个 div 放在包含它的 div 中的 最前面，而将文本放在第二个位置。 - Robusto

Answer 4

你的问题中有几个HTML方面的错误：

• CSS属性"margin-right"会在元素右侧边框外给你提供10px的空间。相反，你应该使用float:right（并且使用div而不是span，因为浮动只适用于块级元素）

• 你的标签没有闭合（使用<div></div>而不是<div><div>）

要实现你想要的效果，请尝试以下操作：

<div id="title">
    This is title <div id="close">X</div>    
</div>  

使用以下CSS

#close 
{ 
 float:right;
}

- Henry C

---

我强烈建议在Mozilla Firefox中获取Firebug（www.getfirebug.com），它将允许您检查页面的html/css并即时更改。或者，您也可以使用IE8中的开发人员工具（按F12键），但我个人认为Firebug最容易使用。 - Henry C

嗨，现在“X”在最右边，但它不在同一行与标题，它跳到第二行了。 - Yongwei Xing