Question

我有一个div元素列表，里面有一个大字母（A，B，C或D）和span（描述）。我想将这些span元素水平对准每个父div，但在所有大字母之间保持固定的距离。我正在寻找这样的东西：

定心部分完成：

span{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

但是当我将一个简单的transition（例如opacity）应用于div元素时，span元素中的第一个字母会从它的位置移开。如果我删除transition或transform属性，问题就会消失，但我需要两个（transform进行居中）。

问题：如何解决transition和transform的问题，或如何在没有span的情况下将transform元素置于中心位置，但保留大字母之间的固定距离？

以下是代码和DEMO：

HTML：

<div class="elements">
    <div>A<span>Description</span></div>
    <div>B<span>Really Long Description</span></div>
    <div>C<span>Description</span></div>
    <div>D<span>Description</span></div>
</div>

SCSS：

.elements{
    margin-left: 50px;
    div{
        position: relative;
        display: inline-block;
        font-size: 40px;
        margin: 0 10px;
        opacity: 0.7;
        transition: 0.3s;
        &:hover{
            opacity: 1;
            span{
                opacity: 1;
            }
        }
        span{
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            transition: 0.3s;
            font-size: 15px;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
        }
    }
}

Answer 1

根据compatibility requirements，您可以随时使用弹性框模型及其方便的justify-content属性，如下所示：

＆＃13;

.elements {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; /*Only one out of the above that's really needed...*/
  justify-content: space-around;/*Only one out of the below that's really needed...*/
  -ms-flex-pack: distribute;
  justify-content: space-around;
}
.elements >div {
  position: relative;
  display: inline-block;
  opacity: 0.7;
  font-size: 30pt;
  text-align: center;
  transition: 0.3s opacity;
}
.elements >div:hover {
  opacity: 1;
}
.elements >div >div {
  font-size: 12pt;
  white-space: nowrap;
}

＆＃13;

<div class="elements">
  <div>A
    <div>Description</div>
  </div>
  <div>B
    <div>Long Description</div>
  </div>
  <div>C
    <div>Description</div>
  </div>
</div>

＆＃13;

你的问题有一个非常好的解决方案，表格！虽然它们只应在语义上用于表格数据，但它们确实具有一些不错的显示属性，并且它们已被使用since forever，因此兼容性不是问题。

＆＃13;

body{
  display:table;
  table-layout:fixed;
}
.elements{display:table-row;}
.elements >div {
  width:20%; /*100% / Number of cells*/
  display:table-cell;
  padding:0 10px; /*There needs to be a little spacing otherwise it looks bad :) */
  opacity: 0.7;
  font-size: 30pt;
  text-align: center;
  transition: 0.3s opacity;
}
.elements >div:hover {
  opacity: 1;
}
.elements >div >div {
  font-size: 12pt;
  white-space: nowrap;
}

＆＃13;

<div class="elements">
  <div>A
    <div>Description</div>
  </div>
  <div>B
    <div>Long Description</div>
  </div>
  <div>C
    <div>Description</div>
  </div>
  <div>D<div>Description</div></div>
</div>

＆＃13;

Answer 2

我还没有找到一种方法可以正常工作transition和transform属性（至少是Firefox）。但我找到了一种方法，将每个span元素置于父div内，保持大字母之间的距离（A，B，C和D）。

请参阅SOLUTION DEMO和添加的代码（SCSS）：

$div-width: 40px;
$span-width: 200px;

.elements{
    div{
        width: $div-width;           // fixed width
        text-align: center;          // center text
        span{
            width: $span-width;                     // big fixed width
            left: -($span-width/2 - $div-width/2);  // -(200px / 2 - 40px / 2)
        }
    }
}

第一个字母随着转换+转换而不合需要地移动（Firefox）

2 个答案: