間距CSS類上市

-1

請看到這個頁面：
http://www.technodoze.com
看到按鈕在分類頁面的右側。
查看單詞提示和技巧。
問題1：
它在整個列中擴展。
問題是：我希望我的單元格根據文本字符串進行擴展，但看起來很尷尬。
問題2：
查看鏈接網頁設計其中一半在一條線上躺在另一條線上，我希望它在同一條線上。（一條<a>鏈路，一條線。）
我的代碼：間距CSS類上市

<style type="text/css"> 
    .cat_link a, .cat_link a:hover, .cat_link a:focus{ 
    padding: 0.25em; 
    color:#3B5998; 
    font-family: Verdana; 
    text-decoration: none; 
    border:1px solid #DADADA; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -khtml-border-radius: 5px; 
    background: #EDEFF4; 
    margin-left: 0; 
    margin-right: 0; 
    line-height:2; 
    margin-top: 1em; 
    margin-bottom: 1em; 
} 
    .cat_link { 
    line-height:2; 
} 
</style>

HTML代碼：

<p class="cat_link"> 
    <a href="http://www.technodoze.com/search/label/Cell%20Phones">Cell Phones</a> 
    <a href="http://www.technodoze.com/search/label/Android">Android</a> 
    <a href="http://www.technodoze.com/search/label/Tips%20and%20Tricks">Tips and Tricks</a> 
    <a href="http://www.technodoze.com/search/label/Amazing">Amazing</a> 
    <a href="http://www.technodoze.com/search/label/Web%20Designing">Web Designing</a> 
    <a href="http://www.technodoze.com/search/label/Windows%20Tips">Windows Tips</a> 
    <a href="http://www.technodoze.com/search/label/Physics">Physics</a> 
    <a href="http://www.technodoze.com/search/label/CSS">CSS</a> 
    <a href="http://www.technodoze.com/search/label/CSS%203">CSS 3</a> 
    <a href="http://www.technodoze.com/search/label/Communication">Communication</a> 
    <a href="http://www.technodoze.com/search/label/Facebook%20tips">Facebook Tips</a> 
    <a href="http://www.technodoze.com/search/label/Dajjal">Dajjal</a> 
    <a href="http://www.technodoze.com/search/label/Bermuda%20Triangle">Bermuda Triangle</a> 
</p>

請，如果你可以給我的解決方案。

來源

2012-10-05 Muhammad Bilal Shafi

它添加到CSS類

.cat_link{ 
    text-align: left ; /* gets rid of wierd white space */ 
} 

.cat_link a{ 
    white-space: nowrap; /*stops buttons from taking up two lines */ 
    }

來源

2012-10-05 19:12:37

非常感謝你 –

您在頁面正文上設置了text-align: justify;重置它text-align: left爲這些類別標記，它會修復這種奇怪的間距。

爲確保文本不像問題2中所述那樣環繞，請在每個類別標籤（選擇器.cat_link a）上設置white-space: nowrap。

來源

2012-10-05 19:07:32 tuff

不固定按鈕佔用2行 –

問題1：有text-align:left是solved-

問題2：你可以把一個display:block;的一個元素，迫使新的生產線，但如果文本比容器會破成一個更大的新隊。

來源

2012-10-05 19:12:25

間距CSS類上市

回答

相關問題