CSS對齊和li標籤中的文本

以下是我正在創建的內容。美元金額鏈接到由jQuery提交的表單。CSS對齊和li標籤中的文本

enter image description here

這裏是我到目前爲止有：

<div class="donate_left_column"> 
    <p>You can be the autemped lorem ipsum quisciis alic to dolupidebis consed deo vellor quam quam re:</p> 
    <div class="donate_amounttable"> 
     <ul> 
      <li><a class="donate_click" id="100" href="#">$100</a>provides 20 new novels for a college prep language arts class.</li> 
      <li><a class="donate_click" id="200" href="#">$200</a>provides 1 week of childcare for a parent starting a new job.</li> 
     </ul> 
    </div> 
</div>

樣式：

.donate_amounttable 
{ 
} 

.donate_amounttable ul 
{ 
    display: inline; 

} 

.donate_amounttable li 
{ 
    display: inline; 
    font-size: 14px; 
    color: #000; 
    padding-bottom: 6px; 
} 

.donate_amounttable a 
{ 
    display: block; 
    font-family: din-condensed-web,sans-serif; 
    background-color: #bfd475; 
    padding: 6px; 
    width: 50px; 
    font-size: 24px; 
    color: #fff; 
    text-align: right; 
    float: left; 
    clear: left; 
}

的問題是，它結束了看起來像這樣：

enter image description here

這是一個小提琴玩：http://jsfiddle.net/rboarman/6G8wr/

感謝您的幫助！

來源

2011-10-07 rboarman

爲什麼不使用

顯示。我知道人們有時會鄙視使用表格，但表格存在的原因是爲了顯示數據。我認爲對於你的用例來說，表格應該足夠好。 –

你意識到，在HTML5之外，'id =「200」'是無效的嗎？（正如任何以數字開頭的'id'）。 –

我沒有意識到;我會改變它。謝謝！ – rboarman

回答

你的CSS只是有一些小毛利問題。
嘗試是這樣的：http://jsfiddle.net/6G8wr/2/

來源

2011-10-07 21:13:52

您的解決方案是最乾淨的，並立即開始工作。謝謝！ – rboarman

這是最好的我發現現在：http://jsfiddle.net/6G8wr/6/

我用<sup>標籤，該標籤用於標文本和一點點的造型。

來源

2011-10-07 21:18:50 Samich

嘗試這樣：

div.donate_amounttable li 
    { 
     width:275px; 
     display:block; 
     font-size: 14px; 
     color: #000; 
     clear:both; 
     padding:5px 0; 
    } 

    div.donate_amounttable a 
    { 
     display: block; 
     font-family: din-condensed-web,sans-serif; 
     background-color: #bfd475; 
     padding:5px 5px 5px 15px; 
     width: 50px; 
     font-size: 24px; 
     color: #fff; 
     text-align: right; 
     float:left; 
     margin-right:10px; 
     text-decoration:none; 
    }

您可以查看這裏的工作模式： http://ninja-code.net/extra/stackoverflow_test2.php

你可以調整它添加更多的空間，或使李更長。

來源

2011-10-07 21:22:56 Biotox

它看起來像你主要的問題是浮動圖像，然後不清除。這使得你的LI元素不會像平常那樣包裹他們的孩子。這將照顧圖像和浮動它們，它也應該很好地包裹。

<style> 
.donate_amounttable 
{ 
} 

.donate_amounttable ul 
{  
margin: 0px; 
padding: 0px; 
} 

.donate_amounttable ul li 
{ 
    font-size: 14px; 
    color: #000; 
    margin-bottom: 6px; 
    width: 450px; 
} 


.wordSpacing { 
float: left; 
margin-left: 12px; 
width: 310px; 
} 
.donate_amounttable a 
{ 
    display: block;  
    font-family: din-condensed-web,sans-serif; 
    background-color: #bfd475; 
    padding: 6px; 
    width: 50px; 
    font-size: 24px; 
    color: #fff; 
    text-align: right; 
    float: left; 
    clear: left; 
} 
</style>

您必須在此添加一些標籤才能獲得所需的單詞換行，並確保LI跨越兩個子元素。

<div class="donate_amounttable"> 
<ul> 
    <li><a class="donate_click" id="100" href="#">$100</a><div class="wordSpacing">provides 20 new novels for a college prep language arts class.</div><div style="clear: left;"></div></li> 
    <li><a class="donate_click" id="200" href="#">$200</a><div class="wordSpacing">provides 1 week of childcare for a parent starting a new job.</div><div style="clear: left;"></div></li> 
</ul> 
</div>

http://jsfiddle.net/4GvQS/

來源

2011-10-07 21:24:27 CBRRacer

相關問題