html & nbsp tem símbolo no espaçamento

votos
0

Eu estou tentando ter uma tag de parágrafo entre dois botões com espaçamento. O pequeno problema é o símbolo estranho quando eu adicionar o comando . Eu só preciso levá-la para fora, ou eu gostaria de saber se existe uma maneira alternativa em adicionar espaço.

HTML:

<div class=col-md-12 text-align-center>
  <button type=submit href=../cards class=fb_btn registerbtn>LOGIN</button>
  <span class=color-gray small>&nbsp;&nbsp;&nbsp;or&nbsp;&nbsp;&nbsp;</span>
  <button type=submit href=cards/register.php class=fb_btn registerbtn>REGISTER</button>
  <p>to claim this coupon</p>
</div>

digite

Publicado 08/11/2018 em 06:33
fonte usuário
Em outras línguas...                            


5 respostas

votos
1

Sugerimos que você use estofamento (esquerdo e direito) em vez de espaço ( &nbsp;). Confira a visualização na https://jsfiddle.net/jwe8h49z/9/

Respondeu 08/11/2018 em 06:44
fonte usuário

votos
0

Este código irá trabalhar para você -

button{background:#f2901a; color:#fff; border:0; padding:15px; width:120px;}
.color-gray{padding:0 20px; position:relative; }
.color-gray::before{content:'---'; position:absolute; left:0px; top:0px;}
.color-gray::after{content:'---'; position:absolute; right:0px; top:0px;}
.text-align-center{text-align:center;}
<div class="col-md-12 text-align-center">
  <button type="submit" href="../cards" class="fb_btn registerbtn">LOGIN</button>
  <span class="color-gray small">or</span>
  <button type="submit" href="cards/register.php" class="fb_btn registerbtn">REGISTER</button>
  <p>to claim this coupon</p>
</div>

Respondeu 08/11/2018 em 06:52
fonte usuário

votos
0

.fb_btn{
  padding:5px;
  margin-right:5px;
  margin-left:5px;
}
<div class="col-md-12 text-align-center">
  <button type="submit" href="../cards" class="fb_btn registerbtn">LOGIN</button>
  <span class="color-gray small">or</span>
  <button type="submit" href="cards/register.php" class="fb_btn registerbtn">REGISTER</button>
  <p>to claim this coupon</p>
</div>

Use CSSpara adicionar espaços entre os controles.

Respondeu 08/11/2018 em 06:46
fonte usuário

votos
0

Eu não vejo quaisquer marcas cinza com apenas o seu código e boostrap neste codepen . Parece que alguma coisa está acontecendo?

Além disso, como @Erik Philips sugeriu, a melhor maneira seria a utilização de margens.

Aqui está um exemplo:

<div class="col-md-12 text-align-center" >
    <button type="submit" href="../cards" class="fb_btn registerbtn" style="margin-right: 10px;">LOGIN</button>
    <span class="color-gray small">or</span>
    <button type="submit" href="cards/register.php" class="fb_btn registerbtn" style="margin-left: 10px;">REGISTER</button>
    <p>to claim this coupon</p>
</div>

Respondeu 08/11/2018 em 06:46
fonte usuário

votos
0

Aplicar CSS Box Modeling e aplicar margem ou preenchimento em vez de usar & nbsp

<style>
button{
 margin: 10px;
}
</style>

<div class="col-md-12 text-align-center">
  <button type="submit" href="../cards" class="fb_btn registerbtn">LOGIN</button>
  <span class="color-gray small">or</span>
  <button type="submit" href="cards/register.php" class="fb_btn registerbtn">REGISTER</button>
  <p>to claim this coupon</p>
</div>

Respondeu 08/11/2018 em 06:43
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more