Блог

Главная - Вопросы по программированию - Как сделать так, чтобы этот интервал, содержащий svg, находился рядом с div

Как сделать так, чтобы этот интервал, содержащий svg, находился рядом с div

#html #css #reactjs

Вопрос:

 codepen.io/f0rta/pen/qBXRXvV

Прежде всего, я прошу прощения за то, что HTML немного запутан, мой проект разработан на React, вот почему.

Итак, я бы хотел, чтобы рядом с первым тестовым div был значок аудио. Однако я не могу этого сделать, я не знаю почему, даже если я установил fa-stack-custom для отображения: inline-block .

Я ожидал, что установлю для своего span значение inline-block, чтобы он оставался рядом с первым тестовым div, но это не так. (Я думаю, это из-за SVG)

Как я могу заставить его оставаться рядом с первым тестовым div?

Прежде всего, я прошу прощения за то, что HTML немного запутан, мой проект разработан на React, вот почему.

Итак, я бы хотел, чтобы рядом с первым тестовым div был значок аудио. Однако я не могу этого сделать, я не знаю почему, даже если я установил fa-stack-custom для отображения: inline-block .

Я ожидал, что установлю для своего span значение inline-block, чтобы он оставался рядом с первым тестовым div, но это не так. (Я думаю, это из-за SVG)

Как я могу заставить его оставаться рядом с первым тестовым div?

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

1. Извините, но это codepen не помогает. Я понимаю, что такое Реагировать, но минимальный, воспроизводимый пример лучше поможет нам разобраться в сути проблемы. Если бы вы могли переписать его в базовый фрагмент и опубликовать здесь, это было бы лучше всего. В любом случае, проблемы со стилем и компоновкой не должны зависеть от используемой вами платформы JS.

Ответ №1:

Ссылка на измененный код, поскольку stackoverflow не допускает символов больше 5000.

Я внес несколько изменений, и некоторые из них таковы:

 .fa-w-16{
margin-left:50px; 
         }
.svg-inline--fa{
 vertical-align: -1em;
  display: inline;
         }
  .fa-stack-2x{
   position: relative;
          }
    .fa-w-18.fa-stack-1x {
    margin-left: -1.8em;
    margin-bottom: 0.5em;
          }
       .question {
display: inline-block;
border: 1px solid black;
border-radius: 1.5rem;
width: 75%;
text-align: left;
margin: 0.1rem 0;
height: 2.5rem;
margin-right: 5em;
        }
  .svg-inline--fa.fa-circle.circle-audio {
top: 15;
        }
          .fa-w-18.fa-stack-1x {
               top: 15;
                           }

Эти изменения могут быть не совсем одинаковыми. Круг и SVG выровнены перед первым тестовым полем (я думаю, это то, что вы хотели.) Пока он остается там, независимо от размера области просмотра, круг будет содержать SVG, но все становится сложнее, когда вы пытаетесь переместить круг вместе с SVG. По-видимому, вам нужно перемещать их один за другим. Я смог понять это только так.

Ответ №2:

Сделайте ширину для обоих родительских элементов «максимальной шириной», а затем установите отображение для svg и текстового поля на встроенное.

Метки: , , ,