反向宽度从左到右转换为从右到左

Question

我正在对http://dreamelectronic.com/中的导航进行逆向工程（必须使用桌面才能获得正确的视图），但这是我自己的方式。

我几乎把它弄下来，发现，但我有一个小问题我需要修复才能使它恰到好处。我所拥有的是2 div，它们位于彼此的顶部，它们都增加了顶部边框的宽度，如网站所示。但是一个div从中心开始，从中心向右延伸，另一个从左侧延伸到中心（如果这是有意义的话）。我需要第二个div（div2，如果你从CSSDeck读取我的代码）从中心开始并向左伸展。

我试过的是根据其他问题的答案中的建议使用transform: rotateX(-180deg);，我也尝试在test-align: right;上设置div2。我也试过animation-direction: alternate;但没有蛋糕。

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

CSSDeck Project

非常感谢，如果我能得到最后一个细节的话！

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，float首先被right margin-right强制推送，然后推送使用div2 hg in --branch XXX 。

希望这有帮助。

P.S。不要忘记关闭 hg pull。

Answer 2

您可以使用＆＃34;从右到左＆＃34; DIV：

position: absolute;
right: 0;

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