Question

问题：

每个“li”标签不是一个接一个（从左上角固定）。相反，它从左向右流动......

我的HTML是：

<div class="fixed-button">
    <ul>
        <li><a href="#" title="">Contact Us</a></li>
        <li><a href="#" title="">nh;kjfwae ilfmnsdkl;</a></li>
    </ul>
</div>

CSS就是：

div.fixed-button{
    position: absolute;
    display: block!important;
    width: 0;
    height: 0;
    z-index: 90000;
    margin: 0;
    outline: 0;
    top: 200px;
}
div.fixed-button a{
    background: url("images/fix-bug-repeat.png") repeat 0 0;
    margin-left: -33px;
    height: auto;
    padding: 10px 14px;
    font: bold 13px/16px arial, sans-serif;
    color: white;
    text-align: center;
    -moz-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -o-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -ms-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    white-space: nowrap;
    position: absolute;
    left: 0;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    border-bottom-width: 0;        
    margin-bottom: 20px;
    text-decoration: none;
}

我尝试了所有可能的方法。但不行。请修复此错误。

Answer 1

您正在对错误的元素应用转换。不是将其应用于每个<a>标记，而是将其应用于<ul>整体。

即使对于水平情况[不读变换正常阅读]，也要使链接并排显示，我们在float: left;标记上使用<li>。

以下是完整代码：

<div class="fixed-button">
    <ul>
        <li><a href="#" title="">Contact Us</a></li>
        <li><a href="#" title="">Shubhanshu Mishra</a></li>
        <li><a href="#" title="">SmexyyWeby</a></li>
        <li><a href="#" title="">SmexyyWeby</a></li>
    </ul>
</div>

我刚刚添加了webkit变换，您可以为同一标记中的其他元素添加变换。

此外，<a>标记的属性position:absolute;也应删除，以使链接正确显示。

这是我用过的最终CSS：

div.fixed-button{
 position: absolute;
 display: block!important;
 z-index: 90000;
 margin: 0;
 outline: 0;
 top: 200px;
}

.fixed-button ul{
    -webkit-transform: scale(1) rotate(90deg) translate(0px, 0px);
    margin-left: 50px;
    -webkit-transform-origin: 0% 0 0;
}

div.fixed-button a {
    background-color: black;
    height: auto;
    padding: 10px 14px;
    font: bold 13px/16px arial, sans-serif;
    color: white;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
}

li{
    float: left;
}

-webkit-transform: translate(0px, 120px)中的 120px 应根据您在css中的需要进行设置，因为它是针对不同布局的更改并水平翻译列表。

更新：我已使用-webkit-transform-origin属性更新了代码，该属性允许您设置旋转元素的原点，并设置margin-left放置。它可以根据需要有效地使用多个<li>元素。您可以在下面的链接中查看新代码。

请检查以下工作代码：http://jsfiddle.net/shubhanshumishra/qhS6r/

css3转换旋转90deg不起作用

1 个答案: