HTML Alinhamento com html, preciso alinha a segundo linha com a de cima

Carlos Alexandre 399 · 14 de agosto de 2019

então essa imagem foi editada só para demostra uma situação, na primeira seta esta apontada pro nome "industrializadas" e ele começa na borda da pagina, tem como coloca a palavra "industrializadas" seguindo a borda da palavra de cima "NÃO" mesmo usando o simbolo awesome font

DiF · 14 de agosto de 2019

@Carlos Alexandre 399 Olá, captei o que você quer.

Acredito que tem duas formas de resolver isso.

Uma é colocando a frase toda em um contêiner como irmão adjacente do elemento <i>

Com isso a estrutura terá que ser alterada para algo do tipo:

<div class="container">
     <i class=" pata fa fa-paw fa-spin"></i>
     <p class="texto">
        Não É para quem não se importa com a saúde de seu cão 
       e quer continuar dando as tóxicas rações industrializadas
     </p>
</div>

Primeiro define o elemento DIV class container como display: table.

depois no elemento <p> você define o display como table-cell juntamente com padding de 5px.

.container{
  display: table;
}
.pata{
  color: #ff9800;
}

.texto{
  display: table-cell;
  padding-left: 5px;
}

Veja funcionando: https://jsfiddle.net/dife/ozyu2eha/9/

A outra maneira seria, na palavra industrializada, você adicionar ela entre o elemento<span> e mover para a margem indicada... mas não é muito bom fazer essa gambiarra... por isso faça da forma que mostrei acima com display table e table-cell

PS: no exemplo, do link, se ficar a frase toda em uma linha, experimente arrastar a divisória da tela pro lado direito pra diminuir.. dai você vai ver a palavra industrializada alinhada corretamente

Carlos Alexandre 399 · 14 de agosto de 2019

tipo resolveu mais o css bugou o site tudo

Carlos Alexandre 399 · 14 de agosto de 2019

Na imagem 1 estou usando um código criado por um moderador : link do funcionamento >> https://jsfiddle.net/61mb5ad0/

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <style>
        .container{
       display: table;
     }
     .pata{
       color: #ff9800;
     }

     .texto{
       display: table-cell;
       padding-left: 5px;

     }
      </style>
  </head>
<h2>Antes de começar falando para quem este programa é perfeito, precisamos ser 100% claros sobre para quem ele NÃO É:</h2>
   <body>
      <div class="container">
          <i class=" pata fa fa-paw fa-spin"></i>
          <p class="texto">
            Não É para quem não se importa com a saúde de seu cão
            e quer continuar dando as tóxicas rações industrializadas
          </p>
        </div>
        <div class="container">
            <i class=" pata fa fa-paw fa-spin"></i>
            <p class="texto">
              Não É para quem não se importa com a saúde de seu cão
              e quer continuar dando as tóxicas rações industrializadas
            </p>
          </div>
          <div class="container">
              <i class=" pata fa fa-paw fa-spin"></i>
              <p class="texto">
                Não É para quem não se importa com a saúde de seu cão
                e quer continuar dando as tóxicas rações industrializadas
              </p>
          </div>
      </body>
</html>

Na imagem 2 eu estava testando : link do funcionamento >> https://jsfiddle.net/ft789vja/

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
   <h4><span style="font-size: 16pt;">Antes de começar falando para quem este programa é perfeito, precisamos ser 100% claros sobre <strong>para quem ele NÃO É:</strong></span></h4>
   <p> </p>
   <p> </p>
   <span style="font-size: 12pt;">
   <p><i class="fa fa-paw fa-spin" style="color:#ff9800"></i> NÃO É para quem NÃO TEM cachorro </p>
   <p> </p>
   <p><i class="fa fa-paw fa-spin" style="color:#ff9800"></i> NÃO É para quem não se importa com a saúde de seu cão e quer continuar dando as tóxicas rações industrializadas </p>
   <p> </p>
   <p><i class="fa fa-paw fa-spin" style="color:#ff9800"></i> NÃO É para quem ainda acredita que a ração é a melhor forma de alimentar seu cão. </p>
   <p> </p>
   <p><i class="fa fa-paw fa-spin" style="color:#ff9800"></i> NÃO É para quem não está disposto a tomar uma ação imediata para: melhorar a saúde, comportamento e a felicidade de seu cachorro </p>
  </span>
  </body>
</html>

na primeira imagem ta usando css, eo css ta bugando o site

queria que ficasse o desenho da pata com o texto sempre a frente dela sem usa css

sadasdad

asdadadad

sadasdada

ao invés do texto fica assim

asdadas

asdadasasda

asdasdadadaa

preciso muito de ajuda pra esse projeto já pesquisei toda forma de fazer isso mais só conseguir essa do css mais ela ta bugando o site

Se ate o mesmo moderador estive vendo isso se tive uma solução por favor

DiF · 14 de agosto de 2019

@Carlos Alexandre 399 Sim isso é normal. Porque tá havendo conflito com alguma regra.

Você vai ter que reformular o seu CSS e até mesmo a estrutura do HTML. Não tem outro jeito.

Carlos Alexandre 399 · 14 de agosto de 2019

~~a ok valeu dnv~~

DiF · 14 de agosto de 2019

6 horas atrás, Carlos Alexandre 399 disse:

queria que ficasse o desenho da pata com o texto sempre a frente dela sem usa css

Impossível. Você vai ter que usar o CSS se quiser formatar o texto.

Dá para fazer com javascript, mas mesmo assim o javascript vai manipular o CSS.. então vai no CSS direto mesmo.

6 horas atrás, Carlos Alexandre 399 disse:

preciso muito de ajuda pra esse projeto já pesquisei toda forma de fazer isso mais só conseguir essa do css mais ela ta bugando o site

Só podes fazer isso com o CSS.. Se tá bugando o site, não achas que tem algo de errado na sua estrutura e no resto do CSS?

Reformule, seu código. Pelo que eu vi no seu código HTML, você tá usando elementos que não são apropriados.

O elemento span não é um contêiner como o DIV. O elemento <i> tá dentro do elemento de parágrafo.

Se você quer manipular os elementos de forma efetiva, separe eles.

Exatamente como fiz no exemplo no JSFiddle. O elemento de ícone precisa ficar como irmão adjacente do elemento de parágrafo... enfim...

Com um pouco mais de estudo você vai conseguir.

6 horas atrás, Carlos Alexandre 399 disse:

Se ate o mesmo moderador estive vendo isso se tive uma solução por favor

A solução já foi dada. O problema está na estrutura do site e no CSS. Como mencionei antes, reformule ele de forma mais limpa.. porque usar o CSS inline pode causar problemas, só use inline( diretamente no elemento) se quiser sobrescrever uma regra css... já que o grau de precedência é maior.