Панель Bootstrap: текст и символ плюс в той же строке

У меня есть панель. В этом случае у меня есть текст слева и символ + с правой стороны. Когда я хочу увеличить размер шрифта +, тогда заголовок панели получит дополнительную высоту.Панель Bootstrap: текст и символ плюс в той же строке

Я не хочу увеличивать размер шрифта в левой части текста. но + символ быть мусором больше, чем текст левой стороны.

.add_discount_plus_minus { 
 
    font-size: 12px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="panel panel-default set_margin_0 set_padding_0 no_box_shadow" > 
 
    <div class="panel-heading text-left "> 
 
    <div class="row "> 
 
     <div class="col-lg-10 col-md-10 col-sm-10"> 
 
     <span>Add Discount</span> 
 
     </div> 
 

 
     <div class="col-lg-2 col-md-2 col-sm-2"> 
 
     <span class="pull-right cursor_pointer add_discount_plus_minus ">+</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Любая помощь будет большим.

Thank you.

источник

2016-12-05 Anonymous

Я знаю, что это не решение вашей проблемы, но, честно говоря человек, который выглядит хорошо для меня. Я бы немного поменял цвет фона на заголовке (но я цветной, так что возьмите это с солью) – Jhecht

плюс символ спускается в панель. как я могу сделать это в строке с левым текстом –

Это способ вертикального выравнивания символ, абсолютное позиционирование и преобразовать с высоты контейнера в любом размере:

position: absolute; 
top: 50%; 
transform: translateY(-50%);

.add_discount_plus_minus { 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 15px; 
 
    transform: translateY(-50%); 
 
    font-size: 12px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="panel panel-default set_margin_0 set_padding_0 no_box_shadow"> 
 
    <div class="panel-heading text-left"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <span>Add Discount</span> 
 
     <span class="cursor_pointer add_discount_plus_minus">+</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-12-05 06:20:42 Nhan

Просто использовать высоту строки в CSS

.add_discount_plus_minus{ 
 
    font-size:30px; 
 
    line-height:20px; 
 
} 
 
#discount{ 
 
    line-height:50px 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="panel panel-default set_margin_0 set_padding_0 no_box_shadow" > 
 
<div class="panel-heading text-left "> 
 
        <div class="row "> 
 
         <div class="col-lg-10 col-md-10 col-sm-10"> 
 
          <span id="discount">Add Discount</span> 
 
         </div> 
 

 
         <div class="col-lg-2 col-md-2 col-sm-2"> 
 
          <span class="pull-right cursor_pointer add_discount_plus_minus ">+</span> 
 
         </div> 
 
        </div> 
 
       </div> 
 
</div>

источник

2016-12-05 06:19:25

вот скрипка: https://jsfiddle.net/tj49pzzm/ –

плюс символ спускается. Я хочу, чтобы это было на одной линии –

Вот новая скрипка https://jsfiddle.net/tj49pzzm/1/ –

добавлены некоторые свойства ypur класса

.add_discount_plus_minus { 
    font-size: 18px; 
    margin-top: -24px; 
    font-weight: 600; 
}

.add_discount_plus_minus { 
 
    font-size: 18px; 
 
    margin-top: -24px; 
 
    font-weight: 600; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="panel panel-default set_margin_0 set_padding_0 no_box_shadow" > 
 
    <div class="panel-heading text-left "> 
 
    <div class="row "> 
 
     <div class="col-lg-10 col-md-10 col-sm-10"> 
 
     <span>Add Discount</span> 
 
     </div> 
 

 
     <div class="col-lg-2 col-md-2 col-sm-2"> 
 
     <span class="pull-right cursor_pointer add_discount_plus_minus ">+</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-12-05 06:31:43

Панель Bootstrap: текст и символ плюс в той же строке

ответ

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