Question

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

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 Positioning 中非常重要，它会在这里帮助你很多（以及将来的猜测）！实际上我在JSFiddle链接中做了它，但我认为你绝对需要友好的浮动和清除（@petebolduc假设你也使用浮动/清除！）

其次是

文字从下到上

您可以在这里使用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/

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

1 个答案:

更新1

希望它能帮到你