浮動問題，我的UL名單

我有類似

<div> 
    <ul id='login'> 
     <li>button1</li> 
     <li>button2</li> 
     <li>button13</li>     
    </ul> 
</div>

我想他們浮到頁面

------------------------------------------------------------------- 
|            button1 button2 button3 | 
|        
|

右側我的css

#login li{ 
    display: inline; 
    text-align: right; 
}

原來如

------------------------------------------------------------------- 
|            button3 button2 button1 
|        
|

我可以簡單地做以下，但我不想改變在html中的順序。

<div> 
      <ul id='login'> 
       <li>button3</li> 
       <li>button2</li> 
       <li>button11</li>     
      </ul> 
    </div>

有沒有辦法解決這個問題？謝謝！

來源

2013-11-22 FlyingCat

我建議不浮什麼，只是用text-align放置對屏幕的右側的inline-block元素：

#login { 
    text-align: right; 
} 

#login li { 
    display: inline-block; 
}

JS Fiddle demo。

來源

2013-11-22 00:05:55

廢話，對不起，我認爲這是我，這是inteded作爲給予好評。如果你稍微改變你的答案，我會解決它，但現在投票被鎖定！我只是突然注意到，我的代表在我的歷史中看到一個低落的點，並且看起來有點低調......再次抱歉。 – hammus

heh，排序。我第一次意外地低估了！需要更多的關注。 – hammus

沒問題;我實際上並不介意被拒絕投票，而是缺乏讓我感到迷惑的解釋，特別是如果我能從可能投票的人身上學到一些東西。不過，在這種情況下，我對意外事件沒事！在英國這裏也很晚了...：D –

我的建議：

#login li{ 
    display: block; 
    float: left; 
} 

#login { 
    margin-left: 50%; //or whatever you like 
}

jsFiddle

來源

2013-11-22 00:03:19 hammus

這應做到：

#login { 
    display: inline-block; /* ul width adapts to its content */ 
    float: right;   /* clears unused left space */ 
    overflow: hidden;  /* Or some other clearfix method */ 
} 

#login li { 
    display: inline-block; /* permits further link enhancements: height, margin, etc. */ 
}

Checkout the example.

來源

2013-11-22 00:09:37 Oriol

浮動問題，我的UL名單

回答

相關問題