Question

我想要完成的是：

Name Surname                                                      Phone: 123
Joe Cool                                                          Fax: 123
Charlie Brown                                                     Email: 123

Some more text goes here, after these two introductory columns. Normal text just  
keeps going, and going, and going ...

是为了对齐右侧文本列？有可能通过Markdown，或者通过HTML或CSS表格，但以一种表格边框不可见的方式吗？

Answer 1

根据您的问题，这里是HTML和CSS。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
.panel-inside { 
    padding-left: 0px;
    padding-right: 0px;
    overflow:auto;
} 

.row                                   
{
    height: 30px;      
    width:100%;        
    vertical-align:middle;
}

.label                               
{
    font-size: 12pt;
    display:inline;    
    float:left;
    margin-left:5px;
    width:200px;
}

.label-right
{
    font-size: 12pt;
    color:#686868;
    display:inline;    
    float:right;
    margin-right:7px;  
    width:200px;
}

.listSeparator                
{
    clear:both;
    height:0;
}

</style>
</head>

<body>

<div class="panel-inside">
    <div class="row">
        <div class="label">Name Surname </div>
        <div class="label-right">Phone: 123</div>
    </div>
    <div class="listSeparator">&nbsp</div> 
    <div class="row">
        <div class="label">Joe Cool</div>
        <div class="label-right">Fax: 123</div>
    </div>
    <div class="listSeparator">&nbsp</div> 
    <div class="row">
        <div class="label">Charlie Brown</div>
        <div class="label-right">Email: 123</div>
    </div>
</div>
<div id="content">
    <p>Some more text goes here, after these two introductory columns. Normal text just keeps going, and going, and going ...
</p>
</div>

</body>
</html>

这里的输出是小提琴： http://jsfiddle.net/LsGSc/

是否可以在降价时通过表左/右对齐文本？

1 个答案: