Блог

Главная - Вопросы по программированию - Как встроить href?

Как встроить href?

#html #css #href

Вопрос:

У меня есть кое-что, похожее на:

 <ContentBlock
    className={'text-gray-300 mt-4'}
>
    Blah blah blah, blah BLAH, blah
    <a href="foo.bar" 
       className={'underline text-gray-200 hover:text-blue-300'}>
          foo bar
    </a>
</ContentBlock>

При отображении ссылка href всегда находится в новой строке сама по себе. Как я могу сделать так, чтобы он оставался «прикрепленным» к предыдущему тексту?

Ответ №1:

  1. первый вариант:

    вы можете использовать display: inline-block как для a тега, так и для элемента перед

         .inline-block {
      display: inline-block;
    } 
         <p class="inline-block"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, !</p>
    <a href="" class="inline-block"> learn more</a>
  2. второй вариант:

    добавьте тег привязки внутри текстового тега перед ним

         <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, !
      <a href=""> learn more</a>
    </p>
  3. третий вариант:

    оберните их гибкой пленкой

         .flex {
      display: flex;
      align-items: center
    } 
         <div class="flex">
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, !</p>
      <a href=""> learn more</a>
    </div>

Комментарии:

1. Отличный ответ! Я думаю, что любому, кто придет позже, было бы полезно понять, что каждое из них имеет разные последствия, когда линия нарушена. Первый вариант переместит ссылку на следующую строку, когда текст будет обернут, третий вариант обернет текст и уберет ссылку в сторону, чтобы у вас было 2 отдельные группы, только второй подход фактически сохраняет текст как единое целое, когда есть обертка.

Ответ №2:

Что-то, что вы можете попробовать, — это добавить свойство CSS «отображать» в свой элемент: display: inline-block;

Ответ №3:

Вы используете Попутный ветер? Затем вызовите встроенный класс. Это то же самое, что: display: inline-block; 

 <ContentBlock
    className={'text-gray-300 mt-4'}
>
    Blah blah blah, blah BLAH, blah
    <a href="foo.bar" 
       className={'inline underline text-gray-200 hover:text-blue-300'}>
          foo bar
    </a>
</ContentBlock>
Метки: