Question

我想要一个右侧中间有十字图标的项目列表。为此，我使用了带有一些填充物的锚，向右浮动，并且相对定位。图标是已知的宽度和高度。

这些项目也有一些文本也应该垂直居中。另外一个问题是这个文本有任意长度，我不希望任何溢出或包装。文本不得与图标重叠，并且必须允许其向上移动。

最后一个难题是每个项目的宽度必须增长到其父项的大小。高度应保持固定。

以下是一个示例（https://jsfiddle.net/bj6806u6/3/）

＆＃13;

div {
  background-color: red;
  padding-right: 50px;
  display: inline-block;
  width: 80%;
  vertical-align: middle;
  height: 50px;
}

p {
  background-color: yellow;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}

a {
  background-color: green;
  float: right;
  position: relative;
  padding: 10px;
  top: 6px;
  right: -44px;
}

＆＃13;

<div><p>This is a short paragraph.</p><a>X</a></div>
<br /><br />
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><a>X</a></div>

＆＃13;

删除-44px;，虽然我仍然不知道如何解决问题但问题显而易见。当然这一定是可能的，这似乎是一个微不足道的问题。

所以我的问题是：如何防止十字架向下移动？我希望它总是看起来像第一个div。

Answer 1

您可以通过定位而不是浮动来实现。外部div获得相对定位，然后x获得绝对定位。它从容器高度的顶部50％向下定位，然后将负边距向上放回x高度的一半，将其置于中间位置。

＆＃13;

div {
  background-color: red;
  padding-right: 50px;
  display: inline-block;
  height: 50px;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}

p {
  background-color: yellow;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

a {
  background-color: green;
  position: absolute;
  padding: 10px;
  top: 50%;
  right: 4px;
  margin-top: -19px;
}

＆＃13;

<div><p>This is a short paragraph.</p><a>X</a></div>
<br /><br />
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><a>X</a></div>

＆＃13;

Answer 2

这有帮助吗？

div {
 background-color: red;
 padding-right: 50px;
 display: inline-block;
 width: 80%;
 vertical-align: middle;
 height: 50px;
position: relative;
 }

p {
 background-color: yellow;
 height: 20px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 display: inline-block;
 max-width: 100%;
}

a {
 background-color: green;
   float: right;
   position: absolute;
   padding: 10px;
   top: 6px;
   right: 10px;
 }

我将div置于相对位置，然后使图标从右侧开始绝对浮动。现在确定这是不是你的意思......

Answer 3

https://jsfiddle.net/bj6806u6/7/

查看代码，您不需要在padding-right上设置div而right设置a（1＆amp; 3），设置{{ 1 {} max-width到全宽减去50px（2）以占用十字架的空间。

＆＃13;

div {
  background-color: red;
  /* padding-right: 50px; */ /* 1 */
  display: inline-block;
  width: 80%;
  vertical-align: middle;
  height: 50px;
}

p {
  background-color: yellow;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: calc(100% - 50px); /* 2 */
}

a {
  background-color: green;
  float: right;
  position: relative;
  padding: 10px;
  top: 6px;
  /* right: -44px; */ /* 3 */
}

＆＃13;

Answer 4

没有什么需要更改添加div位置相对，将标签位置绝对和右-44px更改为5px。 Live FIddle

＆＃13;

  div {
  background-color: red;
  padding-right: 50px;
  display: inline-block;
  width: 80%;
  vertical-align: middle;
  height: 50px;
  position: relative; /*add position relative */
}

p {
  background-color: yellow;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}

a {
  background-color: green;
  float: right;
  position: absolute; /*Change relatie to absolute */
  padding: 10px;
  top: 6px;
  right: 5px;/*Change -44 to 5px*/
}

＆＃13;

<div>
  <p>
  This is a short paragraph.
  </p>
  <a>X</a>
</div>
<br />
<br />
<div>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <a>X</a>
</div>

＆＃13;

Answer 5

我保持宽度固定并在悬停时扩展文字。这是您寻找的解决方案吗？

div {
  background-color: red;
  padding-right: 50px;
  display: inline-block;
  width: 80%;
  vertical-align: middle;
  height:auto;
}

p {
  background-color: yellow;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}

.wrapR
{   
 max-width:80%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;



}
.wrapR:hover { 
 background-color: yellow;
overflow: visible;
}

a {
  background-color: green;
  float: right;
  position: relative;
  padding: 10px;
  top: 6px;
  right: -44px;
}

Answer 6

如果“X”的宽度已知或已固定，则可以限制相邻文本的最大宽度，以确保“X”不会移动或重叠。

div {
      background-color: red;
      padding-right: 50px;
      display: inline-block;
      width: 80%;
      vertical-align: middle;
      height: 50px;
    }

    p {
      background-color: yellow;
      height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
      max-width: calc(100% - 30px);
    }

    a {
      background-color: green;
      float: right;
      position: relative;
      padding: 10px;
      top: 6px;
      right: -44px;
      width:10px;
    }

CSS溢出隐藏和浮动元素

6 个答案: