水平导航菜单中的垂直按钮

Question

我正在尝试在水平导航中使用垂直按钮（从下到上的文本）。谁能帮我？我读过一些关于“变换：旋转”的东西，但我不知道把它放在哪里..

HTML

<div id="menu">
<nav>
    <ul>
        <li><a href="#1">mission</a></li>
        <li><a href="#2">projects</a></li>
        <li><a href="#3">present</a></li>
    </ul>
</nav>

CSS

#menu
{
    border: 1px solid red;
    width: 1325px;
    height: 146px;
    margin: 0 auto;
}

#menu nav ul
{
    background-color: #093;
    list-style-type: none;
}

#menu nav ul li
{
    background-color: #00F;
    width: 146px;
    height: 42px;
    margin: 3px;
}

#menu nav a
{
    text-decoration: none;
}

Answer 1

发件人：w3schools (http://www.w3schools.com/css/css3_2dtransforms.asp)

/** CSS3 2D Transforms **/
.div{
   -ms-transform: rotate(30deg); /* IE 9 */
   -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
   transform: rotate(30deg);
}

从来没有尝试过使用它，我通常使用 javascript 来旋转我的元素，但它似乎是你想要的（我认为你只想在 css/html 中这样做）。

我想你可以直接在#menu nav ul li上应用这个！

如果它不起作用，你能提供一个JSFiddle（或类似的）吗？

更新 1

好吧，抱歉我没有分析你的整个代码，我以为你只是在寻找“轮换”！

首先，对于

蓝色按钮从左到右

您必须使用专有名称float 来完成这项工作，然后使用clear 进行清理。我建议您通过一些教程来练习这一点，它在 CSS 定位 中非常重要，它会在这里对您有很大帮助（我猜也是为了将来）！实际上我是在链接的 JSFiddle 中做到的，但我认为你绝对需要对 float 和 clear 友好（@petebolduc 假设你也使用 float/clear！）

其次是

文字从下到上

在这里您可以使用 CSS3 2D 变换。您必须在文本上应用 270° 旋转，使其从下到上。正如我在第一个答案中所假设的那样，您必须将其应用于#menu nav ul li。

这里是更新的 JSFiddle。我没有更改您的宽度/高度属性，因为我不确定您之后想要做什么，但考虑调整它们！ （根据您的实际值，<li> 超出了<header>，我想这不是您想要的）。如果您在宽度和高度方面需要帮助，请寻求！

我认为它可以是一个很好的定位教程：http://www.barelyfitz.com/screencast/html-training/css/positioning/（我是法国人所以我通常遵循法语教程..）

还有 JSFidle：http://jsfiddle.net/B4SEx/1/

希望对你有所帮助