带有列表的多个填充元素 | 带有列表的多个填充元素

本文介绍了带有列表的多个填充元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试写一些结果看起来像这样的HTML

I am trying to write some html with results that should look like this

Apples       X
Pears        Y
Strawberries Z

使用以下代码：

using the following code:

<html>
<head>
<style type="text/css">
.test {dislay:inline;}
</style>
</head>
<body>


<ul>
<li><div class='test'><div style='width:500px;'>Apples</div>X</div></li>
<li><div style='width:500px;'>Pears</div>Y</li>
<li><div style='width:500px;'>Strawberries</div>Z</li>
</ul>
</body>
</html>

我似乎无法忍受创建最后一个角色的对齐方式。

欢迎任何帮助。

I can't seem to create the alignment of the last character.

Any help would be welcomed.

推荐答案

<style type="text/css">
.test li span
{
    width: 500px;
}

.firstSpan
{
    float: left;
}

.test
{
    list-style-type: none;
}
</style>
<ul class="test">
<li>
    <span class="firstSpan">Apples</span>
    <span>X</span>
</li>
<li>
    <span class="firstSpan">Pears</span>
    <span>Y</span>
</li>
<li>
    <span class="firstSpan">Strawberries</span>
    <span>Z</span>
</li>
</ul>

这篇关于带有列表的多个填充元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！