Отступ HTML с задержкой

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

Если он не крякает как таблица , я использую CSS-плавающие <dt> s и <dd> s для достижения этого (аналогично тому, что я делаю на странице портфолио моего веб-сайта)).

Непроверенный образец кода следует ...

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

Во-первых, просто так, черт возьми ...

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

Вот что вы хотите, используя встроенные стили ...

<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

<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>

Answer 5

Вы должны добавить в свои теги <p> следующее:

style="margin: 0px;"