Question

我通过使用50％的边距和变换来使行内块元素居中对齐。

当我添加transform: translateX(-50%);时，它会在div的左侧显示一个细边框（很难看，但在“全部”的左侧和“搜索产品”的左侧）

如果我尝试将翻译更改为不同的百分比，它将保持不变；有时当我更改百分比时边框会变粗。有人知道为什么会这样吗？

这是我的代码，以防我错过了可能很重要的东西：

HTML：

<div class="tabs">
   <a class="tab active">All</a>
   <a class="tab">New</a>
   <a class="tab">Popular</a>

   <i class="fa fa-search"></i>

   <div class="search-input active">
       <%= text_field_tag :term, params[:term], placeholder: "Search products..." %>
   </div>
</div>

CSS：

.tabs {

    display: inline-block;
    vertical-align: bottom;
    margin-left: 50%;
    transform: translateX(-50%);
}

.tabs .tab {

    margin-right: 32px;
    color: #92969c;
    height: 40px;
    line-height: 40px;
    text-decoration: none;
    display: inline-block;
    vertical-align: bottom;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
}

.tabs .tab.active {

    color: #25282c;
    -webkit-box-shadow: 0 2px 0 #25282c;
    box-shadow: 0 2px 0 #25282c;
    border-bottom: 2px solid #25282c;
}

.search-input {
    display: inline-block;
    max-width: 240px;
    padding: 0 32px 0 10px;
    height: 40px;
    position: relative;
}

.search-input input {
    outline: none;
    height: 40px;
    width: 100%;
    border: none;
    padding: 0;
}

.search-input.active {
    -webkit-box-shadow: 0 2px 0 #25282c; 
    box-shadow: 0 2px 0 #25282c;
}

编辑：似乎是由于我的box-shadow代码引起的问题：

.search-input.active {
    -webkit-box-shadow: 0 2px 0 #25282c; 
    box-shadow: 0 2px 0 #25282c;
}

但是我不想删除我的盒子阴影来解决这个问题...

Answer 1

这是在转换中进行翻译的已知错误，解决方案是null translation hack：

.tabs {

    display: inline-block;
    vertical-align: bottom;
    margin-left: 50%;
    translateX(-50%) translate3d(0,0,0);
}

通过将translate3d(0,0,0)添加到元素中，可以解决框阴影问题而无需删除它们！

Answer 2

似乎您希望它成为边框

通过更改

.search-input.active {
    -webkit-box-shadow: 0 2px 0 #25282c; 
    box-shadow: 0 2px 0 #25282c;
}

到

.search-input.active {
    border-bottom: 2px solid #25282c;
    padding-bottom: 0px;
}

您将获得相同的结果，而侧面没有褪色线。

Answer 3

您可以使用透明的底边框，并在活动的边框上更改其颜色，而不是使用阴影来使边框变宽，而不会导致其他选项卡向下移动。

此外，您可以使用Flexbox而不是translate来使菜单水平居中。

仅这些选项中的任何一个都可以解决您的问题。这是同时使用这两个示例的示例：

.tabs {
  display: flex;
  justify-content: center;
  font-family: monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.tab {
  margin: 0 16px;
  color: #92969c;
  height: 40px;
  line-height: 40px;
  text-decoration: none;
  vertical-align: bottom;
  cursor: pointer;
  border-bottom: 4px solid transparent;
}

.tab.active {
    color: #25282c;
    border-bottom-color: #000;
}

.tab:hover {
  border-bottom-color: cyan;
}

.search-input {
  max-width: 240px;
  padding: 0 32px 0 16px;
  height: 40px;
  position: relative;
  border-bottom: 4px solid transparent;
}

.search-input.active {
  border-bottom-color: #000;
}

.search-input input {
  outline: none;
  height: 40px;
  width: 100%;
  border: none;
  padding: 0;
  font-family: monospace;
  font-size: 12px;
  letter-spacing: 1px;
}

<div class="tabs">
  <a class="tab active">All</a>
  <a class="tab">New</a>
  <a class="tab">Popular</a>

  <div class="search-input active">
    <input type="text" />
  </div>
</div>

translateX导致随机边框出现在<div>的左侧

3 个答案: