Question

这就是我要创建的内容。美元金额与jQuery提交的表单相关联。

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/

感谢您的帮助！

Answer 1

这是我现在发现的最好的内容：http://jsfiddle.net/6G8wr/6/

我使用了<sup>标签，用于上标文字和一些小样式。

Answer 2

尝试这样的事情：

    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

你可以调整它以增加更多的间距或使li更长。

Answer 3

你的CSS只有一些小的保证金问题尝试这样的事情：http://jsfiddle.net/6G8wr/2/

Answer 4

看起来你的主要问题是浮动图像然后不清除。这使得你的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/

CSS在li标签中对齐a和文本

4 个答案: