我一直試圖在CSS方面做得更好，我試圖復制一個菜單項，就像你可以在任何食品交付應用程序上獲得的菜單項一樣。它由一張簡單的卡片組成，上面有一些文字和價格，當您將鼠標懸停在卡片上時，會出現(xiàn)一個小& quot好的& quot向左平移(參見代碼或codepen鏈接)。我遇到的問題是，當。slider類與文本重疊(例如，當屏幕尺寸變小時，或者懸停效果出現(xiàn)時)。這是預期的最終結果(全部是純CSS，沒有涉及JS):

一旦。slider類被轉(zhuǎn)換為59px以隱藏& quot好的& quot，文本不再占用剩余的空間，它從原來的位置停止，使它看起來很奇怪。復制這一點的最簡單的方法是簡單地減小屏幕的尺寸。到目前為止，我肯定已經(jīng)嘗試了至少5種不同的方法，但仍然沒有任何成功，所以任何和所有的幫助都將不勝感激。

此處有Codepen鏈接

body {
  margin: 0 13px;
  font-family: "Roboto", sans-serif;
}

p {
  margin: 0;
}

.main-container {
  max-width: 768px;
  box-sizing: border-box;
  width: 100%;
}

.menu-item {
  width: 100%;
  height: 69px;
  display: flex;
  justify-content: space-between;
  border-radius: 15px;
  box-shadow: 0px 4.01149px 15.0431px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.menu-text {
  min-width: 0; /*for ellipsis*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 15px;
  width: 100%;
}

.menu-text p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price,
.check {
  width: 59px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.check {
  background: #99e2d0;
  border-radius: 0 15px 15px 0;
}

.slider {
  display: flex;
  transform: translateX(59px);
  transition: transform 0.5s ease-in-out;
}

.slider-text {
  display: flex;
}

.menu-item:hover .slider {
  transform: translateX(0);
}

<div class="main-container">
  <div class="menu-item">
    <div class="menu-text">
      <p>Menu Title</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
    </div>
    <div class="slider">
      <p class="price">40€</p>
      <p class="check">OK</p>
    </div>
  </div>
</div>

我研究了一下，可能有更好的解決方案，但這應該可行:

body {
  margin: 0 13px;
  font-family: "Roboto", sans-serif;
}

p {
  margin: 0;
}

.main-container {
  max-width: 767.98px;
  box-sizing: border-box;
  width: 100%;
}

.menu-item {
  width: 100%;
  height: 69px;
  display: flex;
  justify-content: space-between;
  border-radius: 15px;
  box-shadow: 0px 4.01149px 15.0431px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.menu-text {
  min-width: 0; /*for ellipsis*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 15px;
  width: 100%;
}

.menu-text p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price,
.check {
  width: 59px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.check {
  background: #99e2d0;
  border-radius: 0 15px 15px 0;
}

.slider {
  display: flex;
  transform: translateX(59px);
  transition: transform 0.5s ease-in-out;
}

.slider-text {
  display: flex;
}

.menu-item:hover .slider {
  transform: translateX(0);
}


/* Added styles */
.menu-item {
  display: grid;
  grid-auto-flow: column;
}

.menu-text {
  width: calc(100% + 59px);
  transition: width 0.5s ease-in-out;
}

.menu-item:hover .menu-text {
  width: 100%;
}

<div class="main-container">
    <div class="menu-item">
      <div class="menu-text">
        <p>Menu Title</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
      </div>
      <div class="slider">
        <p class="price">40€</p>
        <p class="check">OK</p>
      </div>
    </div>
  </div>