Question

在这方面,我期待着创造的东西。美元数额与j Query提交表格有关。

“entergraph

在这里,我刚才谈到:

<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;
}

问题在于它最终要看:

“enterography

http://jsfiddle.net

得到帮助!

Answer 1

Your css is only having some little margin problems.
Try something like this: http://jsfiddle.net/6G8wr/2/

Answer 2

这是我现在发现的最好情况:。 http://jsfiddle.net/6G8wr/6/。

I used <sup> tag which is used for suprascript text and a small styling.

Answer 3

Try something like this:

    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;
    }

You can view a working model here: http://ninja-code.net/extra/stackoverflow_test2.php

You can tweak it to add more spacing or make the li longer.

Answer 4

It looks like you main problem is floating the image and then not clearing. That makes your LI elements not wrap their children the way they normally would. This will take care of images and float them and it should also wrap nicely.

<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>

你必须在这里增加一些口号,以便用文字总结你想要的东西,确保儿童的生活和生活都跨越。

<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>

。

友情链接