主页 / 问题 / 1302914
Accepted
Danila
Asked:2022-07-07 21:35:46 +0000 UTC2022-07-07 21:35:46 +0000 UTC

CSS：应该给子元素什么左值，以便它完全超出父元素的宽度？

  • 772

有一个父块position: relative和一个子块position: absolute（最初它是隐藏的，当悬停在父块上时会出现）。它必须完全超出父级的边缘到其宽度。但问题是它里面的内容是动态形成的，不可能以像素为单位设置具体的宽度。

有没有可能用纯css解决问题？还是我需要使用js来计算宽度并将这个值添加到left？

.wrap {
  border: 1px solid red;
  max-width: 300px;
  margin: 30px auto;
  position: relative;
  height: 100px;
}
.inner {
  border: 1px solid blue;
  position: absolute;
  padding: 10px;
  opacity: 0;
  left: -94px;
  transition: .2s;
}
.wrap:hover .inner {
  opacity: 1;
}
<div class="wrap">
  <div class="inner">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
    </ul>
  </div>
</div>

html

2 个回答

  1. Best Answer

    你可以留0，然后转帐

    left: 0;  
transform: translateX(-100%);
    • 2 
  2. left: auto; /* можно не указывать */
right: 100%;

    以下是问题代码的 2 个选项（1px 是红色边框的宽度）：

    .wrap {
  border: 1px solid red;
  max-width: 300px;
  margin: 30px auto;
  position: relative;
  height: 100px;
}

.inner {
  border: 1px solid blue;
  position: absolute;
  padding: 10px;
  opacity: 0;
  top: -1px;
  right: 100%;
  transition: .2s;
}

.wrap:hover .inner {
  opacity: 1;
}
    <div class="wrap">
  <div class="inner">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
    </ul>
  </div>
</div>

    .wrap {
  border: 1px solid red;
  max-width: 300px;
  margin: 30px auto;
  position: relative;
  height: 100px;
}

.inner {
  border: 1px solid blue;
  position: absolute;
  padding: 10px;
  opacity: 0;
  right: 100%;
  margin-right: 1px;
  transition: .2s;
}

.wrap:hover .inner {
  opacity: 1;
}
    <div class="wrap">
  <div class="inner">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
    </ul>
  </div>
</div>

    • 2

相关问题