Question

我有一个div'标题'，标题和'close'按钮出现在'div'的右边（float：right）。我正在使用文本溢出：标题的省略号，但如果我使用它，将不再出现关闭按钮（浮动：右）。此行为在所有浏览器中都不一致。以下是代码

<div class="header"> 
    <span class="title">A Very Long Title</span>
    <span class="closeButton"> [X] </span>
</div> 

.header {
    height: 49px !important;
    border: 1px solid #d3d3d3;
    background-color: #E5E5E5;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header .title {
  line-height: 50px;
  margin: 20px;
  font-size: 18px;
  color: #444444;
}

.closeButton {
    float:right; 
    margin: 10px;
}

感谢任何回复。

Answer 1

您可以在position:absolute上使用.closeButton，如此：

.header {
    ...
    position:relative;
}

.closeButton {
    position:absolute;
    top:0;
    right:0;
    margin: 10px;
}

Fiddle Demo

修改

要在标题太长时为您的关闭按钮提供一些空间，您可以在标题中添加一些padding-right，并在其width中减去它，使其保持200px。

.header{ ... width:170px; padding-right:30px; }

Fiddle Demo

Answer 2

只需切换标题和按钮的顺序即可，

<div class="header"> 
    <span class="closeButton"> [X] </span>
    <span class="title">A Very Long LongTitle</span>
</div>

<强> FIDDLE

Answer 3

您可以使用top，right，margin css属性来执行此操作。

您要做的就是将top和right属性设置为零，并将margin设置为自动。

我修改了@blex的答案。实际上是一行保证金css。

.closeButton {
    position:absolute;
    top:0;
    right:0;
    margin: 0 auto;
}

FIDDLE

希望有所帮助

文本溢出和浮动权限问题

3 个答案: