我有灰色行，其中应该包含文本和图标，我的代码：{{ trans.dashboard.settings.car.Name| translate }} <i class="fas fa-caret-up"></i>这是可行的，但我想文本在左边，因为它是现在和图标在右边，所以文本在容器的左角和图标在右角，内角我写这样的代码：i { margin-left: 95px; }但是当左边距较高的图标在文本下方时，它们不在同一行，如何创造更大的空间，但仍然使这两个元素成一行？
{{ trans.dashboard.settings.car.Name| translate }} <i class="fas fa-caret-up"></i>
i { margin-left: 95px; }
7lrncoxx1#
您可以在span标记中同时包含这两者。父（row）标记应该有display: flex;和justify-content: space-between;宣告。
display: flex;
justify-content: space-between;
qyswt5oh2#
只需将文本和图标 Package 在div中。假设您将其称为容器。
.container{ display: flex; justify-content: space-between; width: 100%; }
设置容器的最小宽度，否则容器将采用父宽度。
dldeef673#
您可能不想自己设置边距，而是使用flex-box来实现这一点。
display: flex; justify-content: space-between;
行，这将导致两个查尔兹都位于该行的左侧和右侧。
3条答案
按热度按时间7lrncoxx1#
您可以在span标记中同时包含这两者。父（row）标记应该有
display: flex;和justify-content: space-between;宣告。qyswt5oh2#
只需将文本和图标 Package 在div中。假设您将其称为容器。
设置容器的最小宽度，否则容器将采用父宽度。
dldeef673#
您可能不想自己设置边距，而是使用flex-box来实现这一点。
行，这将导致两个查尔兹都位于该行的左侧和右侧。