как сделать border bottom длиной как текст?

329

17 февраля 2017, 01:20

HTML

     <dl>
      <dt class="option">Описание:</dt>
      <dd class="def">холст/масло</dd>
      <dt class="option">Размер:</dt>
      <dd class="def">28см x 40см</dd>
      <dt class="option">Год:</dt>
      <dd class="def">2017</dd>
      <dt class="option">Цена:</dt>
      <dd class="def">100500</dd>
    </dl>

CSS

.option {
  font-family: 'verdana';
  font-size: 1.4em;
  border-bottom: @orange 1px solid;
  }
.def{
font-family: 'verdana';
font-size: 1.2em;
margin-bottom: 15px;
}

Answer 1

Если вам нужно, чтобы подчеркивание было одно в случае, если описание будет больше, чем одна строчка, то можно использовать float:

 dl,dt,dd{ 
   padding:0; 
   marfin:0; 
   display:block; 
 } 
 .option { 
  text-align:right; 
  float:right; 
  border-bottom:1px solid orange; 
 } 
 
.def{ 
  clear:both; 
  text-align:right; 
  margin-bottom:30px 
 }

<dl> 
  <dt class="option">Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание:</dt> 
  <dd class="def">холст/масло</dd> 
  <dt class="option">Размер:</dt> 
  <dd class="def">28см x 40см</dd> 
  <dt class="option">Год:</dt> 
  <dd class="def">2017</dd> 
  <dt class="option">Цена:</dt> 
  <dd class="def">100500</dd> 
</dl>

Если нет, то можно использовать span:

 dl,dt,dd{ 
   padding:0; 
   marfin:0; 
   display:block; 
 } 
 .option { 
  text-align:right; 
 } 
 .option span{ 
  border-bottom:1px solid orange; 
 } 
 
.def{ 
  text-align:right; 
  margin-bottom:30px 
 }

<dl> 
  <dt class="option"><span>Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание:</span></dt> 
  <dd class="def">холст/масло</dd> 
  <dt class="option"><span>Размер:</span></dt> 
  <dd class="def">28см x 40см</dd> 
  <dt class="option"><span>Год:</span></dt> 
  <dd class="def">2017</dd> 
  <dt class="option"><span>Цена:</span></dt> 
  <dd class="def">100500</dd> 
</dl>