如何制作2条线

时间:2010-09-07 20:52:51

标签: asp.net html css

我想在TD中显示两行

  <td bgcolor="White" >
    First Name  
   (on external website)                                 
  </td>

它显示,彼此相邻。我希望如下。第1行粗体和第2行是小写字母。

alt text

7 个答案:

答案 0 :(得分:8)

您可以添加<br/>来强制换行并为字体样式定义一些CSS类:

<style>
.name { font-weight: bold; }
.subtext { font-size: smaller; }
</style>

<td bgcolor="White" >
<span class="name">First Name</span>  <br/>
<span class="subtext">(on external website)</span>
</td>

<强>更新: 为了完整起见,我还要包括其他人的建议:不使用<br/>元素,而是通过CSS控制换行符。这样做的好处是,您只需编辑CSS即可更改行为(删除换行符):

<style>
.name { font-weight: bold; display:block; }
.subtext { font-size: smaller; }
</style>

<td bgcolor="White" >
<span class="name">First Name</span>
<span class="subtext">(on external website)</span>
</td>

除了使用span元素外,您还可以使用div s,默认情况下具有换行符(但可以通过在CSS中设置display:inline来禁用它)。

答案 1 :(得分:2)

<td bgcolor="White" >
    <span style="font-weight:bold;">First Name</span>  <br/>
    <span style="font-size:6px;">(on external website)</span>
</td>
像我想的那样

答案 2 :(得分:2)

由于您希望以不同方式对线条进行样式设置,因此无论如何都需要将它们放在单独的元素中,因此如果使用块元素,它们将最终成为单独的行:

<td style="background: white;" >
  <div style="font-weight: bold;">First Name</div>
  <div style="font-size: 70%;">(on external website)</div>                                 
</td>

答案 3 :(得分:1)

<span></span>与block属性或<p></p>

一起使用

答案 4 :(得分:0)

<td bgcolor="White" >
    <strong>First Name</strong><br />
   <small>(on external website)</small>
  </td>

答案 5 :(得分:0)

你可以放一个p标签来表示这样的换行符。

<td> 
    First Name   
   <p>(on external website)</p>
</td> 

或者像这样使用br标签:

<td> 
    First Name <br />
    (on external website)
</td> 

答案 6 :(得分:0)

最简单的解决方案是在他的答案中添加<br />作为@ M4N写入。但是看起来,“名字”是某种标题,我建议使用适当的HTML标签。还可以使用CSS来设置表格样式:

HTML:

<td class="white">
    <h3>First Name</h3>
    <span class="small">(on external website)</span>
</td>

CSS:

.white {
    background-color: white;
}
.small {
    font-size: .8em;
}

注意:由于<h3>是块级元素,因此换行符会自动“插入”