Как выровнять текст в одном абзаце по левому и правому краю в Primevue InlineMessage
Я хочу выровнять 2 текста влево и вправо с помощью бутстрапа. Я использовал компонент Primevue InlineMessage.
<InlineMessage severity = "error" class = "my-4 block align-items-center">Error Request Percentage <span class = "" > 10%</span> </InlineMessage>
Кто-нибудь может мне помочь?
Я пытался использовать text-align, align-items, но, похоже, не применяется?
Ответы 3
Я предполагаю, что вы хотите выровнять один текст влево, а промежуток вправо?
Во-первых, вам нужно изменить класс block на flex, чтобы вы могли использовать flexbox.
Затем вам нужно использовать утилиту justify-content. Вы можете сделать это с классом justify-content-between.
Если вы не видите изменений, просто добавьте класс w-100, чтобы элемент <InlineMessage> занимал 100% доступной ширины.
Ваш код будет выглядеть так:
<InlineMessage severity = "error" class = "my-4 flex justify-content-between w-100">Error Request Percentage <span style = "margin-left: auto" > 10%</span> </InlineMessage>
Хорошо, я изменил свой ответ. можешь попробовать сейчас?
Я добавил в диапазон стиль margin-left: auto.
В Bootstrap нет определения .block css, вы можете добавить его самостоятельно, например:
.block { display: flex; }
И добавьте к вашему встроенному классу justify-content-center, чтобы отцентрировать его.
Если вы хотите использовать блок, определите .block { display: block; } и добавьте класс text-center, чтобы центрировать текст.
В противном случае ваш встроенный текст будет таким же длинным, как текст внутри него, и он никогда не выровняет его.
.block { display: flex; }
.block2 { display: block; }<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>
<InlineMessage severity = "error" class = "my-4 block align-items-center justify-content-center">Error Request Percentage <span class = "" > 10%</span> </InlineMessage>
<InlineMessage severity = "error" class = "my-4 block2 text-center">Error Request Percentage <span class = "" > 10%</span> </InlineMessage>Если я правильно понял, что вы хотите по-разному выровнять внутри встроенного элемента, вы можете использовать что-то вроде этого:
.block { display: flex; }
.block > span { flex: 1; text-align: right; }<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>
<InlineMessage severity = "error" class = "my-4 block align-items-center justify-content-left">Error Request Percentage <span class = "" > 10%</span> </InlineMessage>Спасибо за Ваш ответ. Я не работаю точно так, как я ожидал. Я понял, что это ссылка на ваш ответ. Мое решение находится в разделе комментариев L.Raudel.
В примьюве компонент <InlineMessage> имеет встроенную иконку. в этом случае, если вы собираетесь использовать class = "justify-content-between", он будет работать не так, как вы ожидали.
Но ты сможешь это сделать...
<InlineMessage severity = "success" class = "block py-5 my-4">
<div class = "" style = "float:left">Total Requests</div>
<div class = "" style = "float:right">10</div>
</InlineMessage>
А также ширина родительского элемента должна быть 100%.
Что вы подразумеваете под родительским элементом. Это блок InlineMessage?
Да..! но будет унаследованный элемент патента. Вы можете проверить это, используя элемент проверки браузера.
Я попробовал ваш код, но получил частично правильный ответ. У меня есть галочка слева, но все «Процент запроса ошибки: 10%» справа. Я использую Primevue InlineMessage