在div标签中最右边的内容

Question

我有一些html代码段

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

这个div的宽度是动态的，可能是300 600或800 px。我希望在最右边的div处的“X”在同一行。所以写一下如下的CSS：

#close
{
   margin-right:10px;
}

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

最诚挚的问候，

Answer 1

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

和班级

.float-right{
float:right;
}

Answer 2

使用绝对定位。

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

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

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;
}

或者你可以完全摆脱跨度，只需使用div，使它可能宽20px，并用不同的颜色设计它，使它看起来更像一个按钮。

我，我会在img中使用图形作为关闭按钮，但是对于每个人都使用它。

替代安排：

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

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;
}