Question

我正在创建一个带有几个链接的浮动菜单，我应用了一个css来垂直旋转（-90deg）但是高度超过了预期，我怎么能减少呢？我也希望删除每个链接之间的空格。

-webkit-transform: rotate(-90deg);
margin-top:0px;
font-size: 14px;
width:96px;
padding: 0 0 0 0;
height: 98%;

Answer 1

您可能希望使用媒体查询来实现此目的。你可以在下面找到一个简单的例子。只需设置您希望更改发生的所需分辨率，并定义您想要受影响的类和样式。

其他资源

这是一个关于媒体查询的精彩链接，可以帮助您入门：

http://css-tricks.com/css-media-queries/

如果您有兴趣了解更多关于响应的信息，这本书不会让您失望。超级快速阅读，它将回答您关于响应的所有问题：

http://www.abookapart.com/products/responsive-web-design

JSFiddle＆amp;示例代码

http://jsfiddle.net/ZV6N5/2/

CSS

@media all and (max-width : 800px) {
    #menu > a{
        width: 50px;
        font-size:100%;
    }
}

Answer 2

您需要将explicite width和height设置为<a>，将文本换行到您旋转的另一个容器中并将其翻译回来。

要删除inline-block元素中的空格，您可以在#menu设置font-size:0;，因为您设置了font-size：<a>，font-size会减少您的white-space HTML代码中的1}}无法看到。

<强> DEMO

#menu > a {
    overflow:visible;
    margin-top:0px;
    font-size: 14px;
    width:40px;
    padding: 0 0 0 0;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    font-family: Tahoma, Geneva, sans-serif;
}
#menu>a>span, #menu>a {
    height:60px;
    line-height:60px;
    min-width:60px;
}
#menu>a>span {
    float:left;
    padding:0 5px;
    margin-right:-5em;/* remove this if you do not want see span overflow; */
    box-shadow:inset 0 0 0 1px black;
    transform: rotate(-90deg) translatex(-60px);
    transform-origin: top left;
    background: rgba(153, 153, 153, .8);
    color: rgba(255, 255, 255, 1);
}

和链接形成如下<a href="#"><span>Item</span></a>。

Answer 3

好吧，当你旋转物品时，你的身高＆＃34;身高＆＃34;实际上是你的 width 声明。

不幸的是，从您使用百分比构建高度/宽度的方式来看，您实际上无法达到您想要的效果，因为现在可以告诉孩子元素是它的某个百分比。 父母的身高，这是您的目标（a的宽度应该是#menu＆＃39的100％ ;高度）。

如果你愿意，还有一些你可以做的事情：

如果您在某个范围内计算您的测量结果并且您知道只有一点点会突然出现，您可以让#menu {overflow:hidden;}隐藏孩子的多余部分。这是一个简单的黑客，而不是一个真正的修复。
您可以对菜单的高度进行硬编码，并将相同的高度设置为您孩子的宽度。（如果您还需要填充，则可以减去硬编码值，或根据您的辅助功能要求将box-sizing更改为border-box。
为了更好地促进＃2，您可以使用rem将宽度/高度硬编码为不同的响应练习而不是百分比

真的，您需要做的就是确保您的孩子的宽度与菜单的高度相同，但是您想要解决的问题取决于您，但流体百分比不会起作用好。

Answer 4

负边距和硬编码高度解决了这个问题！

#menu
{height:100px;}

#menu > a {
-webkit-transform: rotate(-90deg);
font-size: 100%;
padding: 0 0 0 0;
height: 40px;
position:relative;
margin-left:-30px;
margin-right:-30px;
bottom:-30px;}

fiddle

控制高度并删除旋转的div之间的空格

4 个答案:

其他资源

JSFiddle＆amp;示例代码