从左到右到从右到左的逆宽度转换

Question

我在http://dreamelectronic.com/逆向工程的导航(必须使用桌面正确的视图)，但在我自己的方式。

我几乎把它写下来了，但是我有一个小问题需要解决，以使它正确。我所拥有的是2个相互叠加的div，它们都增加了顶部边框的宽度，就像网站上看到的那样。但是一个div从中心开始，从中心向右延伸，另一个从左边向中心延伸(如果这有意义的话)。我需要第二个div (div2，如果你去读我的代码从CSSDeck)从中心开始，拉伸到左边。

我所尝试的是使用transform: rotateX(-180deg);从另一个问题的答案之一建议，我也试图设置test-align: right;上的div2也建议。我也试过animation-direction: alternate;，但是没有蛋糕。

我在这里遇到过几个类似的情况，但到目前为止没有一个对我有效。

CSSDeck项目

如果我能把这最后的细节写下来，非常感谢!

Answer 1

您可以在div2上设置以下属性:

div2 {
  float: right;
  margin-right: 50px;
  ...
}

片段:

ul {
    padding: 0;
    margin: 20px;
}
li {
    float: left;
    list-style: none;
    display: inline-block;
    width: 100px;
}
div1 {
    margin-left: 50px;
    text-align: center;
    line-height: 3;
    display: block;
    position: absolute;
    width: 0px;
    height: 50px;
    border-top: 3px solid #D50;
    transition: all .4s ease-in-out;
    opacity: 0;
}
div2 {
    float: right;
    margin-right: 50px;
    text-align: center;
    line-height: 3;
    display: block;
    width: 0px;
    height: 50px;
    border-top: 3px solid #D50;
    transition: all .4s ease-in-out;
    opacity: 0;
}
men a {
    text-align: center;
    line-height: 3;
    color: #444;
    text-decoration: none;
    display: block;
    position: absolute;
    width: 100px;
    height: 50px;
    z-index: 1;
    transition: color .4s ease;
    margin-top: 4px;
}
men a:hover {
    color: #D50;
}
men a:hover~div1 {
    width: 50px;
    opacity: 1;
}
men a:hover~div2 {
    width: 50px;
    opacity: 1;
}

<ul>
  <li>
    <men>
      <a href="#">HOME</a>
      <div1></div1>
      <div2></div2>
    </men>
  </li>
  <li>
    <men>
      <a href="#">ABOUT</a>
      <div1></div1>
      <div2></div2>
    </men>
  </li>
  <li>
    <men>
      <a href="#">PRODUCTS</a>
      <div1></div1>
      <div2></div2>
    </men>
  </li>
  <li>
    <men>
      <a href="#">CONTACT</a>
      <div1></div1>
      <div2></div2>
    </men>
  </li>
</ul>

所以你的div1是用margin-left(你已经有了)推送的，你的div2首先从right强制到float，然后用margin-right推送。

希望对你有帮助。

注:别忘了关闭 div2 .

Answer 2

你可以使用"right-to-left"的定位

position: absolute;
right: 0;

http://jsfiddle.net/u5ofdp9m/1/