HTML / CSS对齐标签文本
[英]Html/CSS aligning the text of a label
问题描述
我尝试使用html + CSS呈现目录树结构。 我所缺少的是如何在特定的水平位置对齐每个文件的大小和数据。
您可以看一下下面的代码，这可能会清除。 在第10行有“ File1 8MB 01/12/2010”。 如何将“ 8MB”对准中心，将“ 01/12/2010”对准右边？
在html之后，我附上CSS以防万一。 我是新来的，因此感谢您的帮助和耐心。
<body>
<div>
Size Date
</div>
<ol class="tree">
<li>
<label for="folder1">Folder1</label> <input type="checkbox" checked disabled id="folder1" />
<ol>
<li class="file">File1 8MB 01/12/2010</li>
<li>
<label for="subfolder1">Subfolder 1</label> <input type="checkbox" id="subfolder1" />
<ol>
<li class="file">File1 8MB 01/12/2010</li>
<li>
<label for="subsubfolder1">Subfolder1</label> <input type="checkbox" id="subsubfolder1" />
<ol>
<li class="file">File2 8MB 01/12/2010</a></li>
<li>
<label for="subsubfolder2">Subfolder 1</label> <input type="checkbox" id="subsubfolder2" />
<ol>
<li class="file">Subfile1 8MB 01/12/2010</li>
<li class="file">Subfile2 8MB 01/12/2010</li>
</ol>
</li>
</ol>
</li>
<li class="file">File3 8MB 01/12/2010</li>
<li class="file">File4 8MB 01/12/2010</li>
</ol>
</li>
</ol>
</li>
</ol>
</body>
如果有帮助，这里是CSS：
/* Just some base styles not needed for example to function */
*, html { font-family: Verdana, Arial, Helvetica, sans-serif; }
body, form, ul, li, p, h1, h2, h3, h4, h5
{
margin: 0;
padding: 0;
}
body { background-color: #606061; color: #ffffff; margin: 0; }
img { border: none; }
p
{
font-size: 1em;
margin: 0 0 1em 0;
white-space: pre
}
div{white-space: pre-wrap;}
html { font-size: 100%; /* IE hack */ }
body { font-size: 1em; /* Sets base font size to 16px */ }
table { font-size: 100%; /* IE hack */ }
input, select, textarea, th, td { font-size: 1em; }
/* CSS Tree menu styles */
ol.tree
{
padding: 0 0 0 30px;
width: 900px;
}
li
{
position: relative;
margin-left: -15px;
list-style: none;
}
li.file
{
margin-left: -1px !important;
}
li.file a
{
background: url(document.png) 0 0 no-repeat;
color: #fff;
padding-left: 21px;
text-decoration: none;
display: block;
}
li input
{
position: absolute;
left: 0;
margin-left: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
height: 1em;
width: 1em;
top: 0;
}
li input + ol
{
background: url(toggle-small-expand.png) 40px 0 no-repeat;
margin: -0.938em 0 0 -44px; /* 15px */
height: 1em;
}
li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }
li label
{
background: url(folder-horizontal.png) 15px 1px no-repeat;
cursor: pointer;
display: block;
padding-left: 37px;
}
li input:checked + ol
{
background: url(toggle-small.png) 40px 5px no-repeat;
margin: -1.25em 0 0 -44px; /* 20px */
padding: 1.563em 0 0 80px;
height: auto;
}
li input:checked + ol > li { display: block; margin: 0 0 0.125em; /* 2px */}
li input:checked + ol > li:last-child { margin: 0 0 0.063em; /* 1px */ }
3 个解决方案
解决方案1
3 2013-08-14 14:49:36
如果是我，我将不会像这样构造代码。 但是您仍然可以使用已有的代码以及更多的跨度和以下CSS（使用绝对定位）来完成此操作：
HTMl示例：
<ol>
<li class="file">
<span class="leftPos">File1</span>
8MB
<span class="rightPos">01/12/2010</span>
</li>
</ol>
CSS
li {
position: relative;
display: block;
text-align: center; }
li span.rightPos { position:absolute; right:0; }
li span.leftPos { position:absolute; left:0; }
小提琴： http ： //jsfiddle.net/ntqJd/
解决方案2
1 2013-08-14 15:19:22
如果您是我，我会使用一张桌子，这会使事情变得更加简单：
<html>
<head>
<style>
table {
width: 400px;
margin: 0 auto;
}
.centerText {
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th></th>
<th>Size</th>
<th>Date</th>
</tr>
<tr>
<td>File 1</td>
<td class="centerText">5MB</td>
<td class="centerText">01/12/2010</td>
</tr>
</table>
</body>
</html>
边距：0 auto只是使表格在页面中居中。
希望这可以帮助。
解决方案3
0 2013-08-14 14:56:48
在这种情况下，您可以使用表格标签。
<ol>
<li>
<table>
<tr>
<td>File1</td>
<td>8MB</td>
<td>01/12/2010</td>
</tr>
</table>
</li>
</ol>
在CSS和HTML中对齐文本
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.