Question

我想让一些html输出看起来像这样......

Tag1             blah blah blah asdfge kedkled pijj ;dopkd
                 uiedeidiud edioejd
Tagbigger        more blah blah blah wdeodeodd  epkdepdpd 
                 more of the same...

我想html本身可能看起来像

<p>Tag1<zz>blah blah blah asdfge kedkled pijj ;dopkd uiedeidiud edioejd</zz></p>
<p>Tagbigger<zz>more blah blah blah wdeodeodd  epkdepdpd more of the same...</zz></p>

除了我不想要段落之间的空白行。

这是否有一些标准的类型设置名称？更好的是，有人可以在样式表中指出我吗？

Answer 1

如果它看起来像一张桌子，那就像桌子那样嘎嘎叫......

<table>
  <tr>
    <th>Tag1</th>
    <td>blah blah blah asdfge kedkled pijj ;dopkd uiedeidiud edioejd</td>
  </tr>

  <tr>
    <th>Tagbigger</th>
    <td>more blah blah blah wdeodeodd  epkdepdpd more of the same...</td>
  </tr>
</table>

Answer 2

如果它不是quack like a table，我使用CSS浮动的<dt>和<dd>来完成此操作（类似于我在网站的投资组合页面中所做的）

未经测试的示例代码如下......

HTML：

<dl>
    <dt>Tag1</dt>
    <dd>blah blah blah asdfge kedkled pijj ;dopkd uiedeidiud edioejd</dd>

    <dt>Tagbigger</dt>
    <dd>more blah blah blah wdeodeodd  epkdepdpd more of the same...</dd>
</dl>

CSS：

dl, dt, dd {
    margin: 0;
    padding: 0;
}

dl {
    overflow: hidden;
}

dt {
    clear: both;
    float: left;
    width: 15%;
}

dd {
    float: right;
    width: 85%;
}

Answer 3

首先，只是为了它... ...

<pre>
Tag1             blah blah blah asdfge kedkled pijj ;dopkd
                 uiedeidiud edioejd
Tagbigger        more blah blah blah wdeodeodd  epkdepdpd 
                 more of the same...
</pre>

这是你想要的，使用内联样式...

<div style="width:400px;">

  <div style="float:left;">Tag1</div>

  <div style="margin-left:150px;">blah blah blah asdfge kedkled pijj ;dopkd uiedeidiud edioejd</div>

  <div style="float:left;">Tagbigger</div>        

  <div style="margin-left:150px;">more blah blah blah wdeodeodd epkdepdpd more of the same...</div>

</div>

...或类和样式表。

<style>
  .container {width:400px;}
  .tag {float:left;}
  .blah {margin-left:150px;}
</style>

<div class="container">

  <div class="tag">Tag1</div>

  <div class="blah">blah blah blah asdfge kedkled pijj ;dopkd uiedeidiud edioejd</div>

  <div class="tag">Tagbigger</div>        

  <div class="blah">more blah blah blah wdeodeodd epkdepdpd more of the same...</div>

</div>

Answer 4

您应在<p>代码中添加以下内容：

style="margin: 0px;"

Answer 5

<style>
div#left {float:left; width:30%;}
div#right {float:left; width:69%;}
</style>


<div>
     <div id="left">Tag1</div>
     <div id="right">blah blah blah asdfge kedkled pijj ;dopkd uiedeidiud edioejd</div>
</div>
<div>
     <div id="left">Tagbigger</div>
     <div id="right">more blah blah blah wdeodeodd  epkdepdpd more of the same...</div>
</div>

HTML延迟缩进

5 个答案: