2

問題：

各「li」タグは1つずつ表示されません（左上から修正）。代わりに、左から右に流れます...

私の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は、レイアウト-webkit-transform: translate(0px, 120px)ごとに変更され、リストを水平方向に変換するため、cssのニーズに応じて設定する必要があります。

更新：属性を使用してコードを更新しました。-webkit-transform-originこれにより、要素を回転させる原点を設定したりmargin-left、適切な配置を設定したりできます。必要な数の<li>要素に対して効果的に機能します。以下のリンクで新しいコードを確認できます。

http://jsfiddle.net/shubhanshumishra/qhS6r/で動作するコードを確認してください。

于 2012-10-10T14:24:06.920 に答える