2

问题：

每个“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;
}

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

4

1 回答 1

2

您正在对错误的元素应用变换。而不是将其应用于每个<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;
}​

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

更新：我已经通过使用-webkit-transform-origin属性更新了代码，这将允许您设置旋转元素的原点并设置margin-left正确放置的位置。它对任意数量的<li>元素都有效。您可以在下面的链接中查看新代码。

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

于 2012-10-10T14:24:06.920 回答