Формат HTML Текст собственно

Как отформатировать текст с HTML и CSS, чтобы получить что-то вроде этого:Формат HTML Текст собственно

Animals: cat, dog, mouse, 
     lion, tiger

Я попытался это, но она doesnt't работу.

.column { 
 
\t width: 300px; 
 
} 
 

 
.fat-text { 
 
\t font-weight: bold; 
 
\t display: inline-block; 
 
} 
 

 
.listing { 
 
\t border: 1px solid red; 
 
\t display: inline-block; 
 
}

<html> 
 
<head> 
 
</head> 
 
<body> 
 
\t <div class="column"> 
 
\t \t <span class="fat-text">Animals: </span><span class="listing">cat, dog, mouse, elephant, tiger, lion, penguin, lama, wolf</span> 
 
\t </div> 
 

 
</body> 
 
</html>

источник

2016-01-08 JohnDizzle

Это то, что я буду использовать таблицу для ... выглядит как данные табуляции, пахнет табличными данными ... используйте таблицу. –

Определить ширину вашего .listing и определить vertical-align:top, как как этот

.column { 
 
\t width: 300px; 
 
} 
 

 
.fat-text { 
 
\t font-weight: bold; 
 
\t display: inline-block; vertical-align: top; 
 
} 
 

 
.listing { 
 
\t border: 1px solid red; 
 
\t display: inline-block; width: 230px; 
 
vertical-align: top; 
 
}

<html> 
 
<head> 
 
</head> 
 
<body> 
 
\t <div class="column"> 
 
\t \t <span class="fat-text">Animals: </span><span class="listing">cat, dog, mouse, elephant, tiger, lion, penguin, lama, wolf</span> 
 
\t </div> 
 

 
</body> 
 
</html>

источник

2016-01-08 10:43:15

Измените CSS для класса листинга добавлено два свойства:

position: absolute; 
    width: 113px; in case if you want fixed width

.column { 
 
\t width: 300px; 
 
} 
 

 
.fat-text { 
 
\t font-weight: bold; 
 
\t display: inline-block; 
 
} 
 

 
.listing { 
 
\t border: 1px solid red; 
 
position: absolute; 
 
width: 113px; 
 
\t display: inline-block; 
 
}

<html> 
 
<head> 
 
</head> 
 
<body> 
 
\t <div class="column"> 
 
\t \t <span class="fat-text">Animals: </span><span class="listing">cat, dog, mouse, elephant, tiger, lion, penguin, lama, wolf</span> 
 
\t </div> 
 

 
</body> 
 
</html>

источник

2016-01-08 10:45:03 luckwithu

Я хотел бы предложить использовать Flexbox для этого:

<!doctype html> 
 
    <html> 
 
     <head> 
 
      <style type="text/css"> 
 
       .column { 
 
       width: 300px; 
 
       display: -webkit-box; 
 
       display: -webkit-flex; 
 
       display: -ms-flexbox; 
 
       display: flex; 
 
       -webkit-flex-flow: row nowrap; 
 
        -ms-flex-flow: row nowrap; 
 
         flex-flow: row nowrap; 
 
       } 
 
       .fat-text { 
 
       font-weight: bold; 
 
       margin-right: 8px; 
 
       } 
 
      </style> 
 
     </head> 
 
     <body> 
 
      <div class="column"> 
 
      <span class="fat-text">Animals: </span><span class="listing">cat, dog, mouse, elephant, tiger, lion, penguin, lama, wolf</span> 
 
      </div> 
 

 
     </body> 
 
    </html>

источник

2016-01-08 10:49:04 greenRed

Формат HTML Текст собственно

ответ

Смежные вопросы