css-无法保持图标旁边的文本对齐答案

【问题标题】：css- unable to keep the text aligned next to the iconcss-无法保持图标旁边的文本对齐
【发布时间】：2017-07-26 18:16:51
【问题描述】：

我正在制作一个 ionic2 应用程序。您在上面看到的屏幕部分来自我的一个页面，其中显示了地址和手机号码。

我为地址添加了一个图标，但是当它转到下一行时您可以看到它，当我希望文本保持这样的状态时，它从最左侧开始。

(icon) This is where I show address, and i'm trying 
       to keep it aligned

谁能告诉我该怎么做？我的 CSS 知识很薄弱。

我的代码：

  <ion-item-group>
    <ion-item>
      <ion-icon name="pin"></ion-icon> <span text-wrap>This is where I show address, and i'm trying to keep it aligned </span></ion-item>
    <ion-item>
      <ion-icon name="call"></ion-icon> 01162464176</ion-item>
  </ion-item-group>

DEMO

【问题讨论】：

使用 flex 获取
@Anna Bella 我在检查了全宽和小屏幕后更新了答案。请检查它，如果有问题，请做comment.ty

标签： css sass ionic2

【解决方案1】：

您可以使用网格布局来实现这一点。将图标和文本放在一行内的 2 列中，并将图标列宽设置为自动，即使图标大小发生变化，它也会自动调整，您不必对宽度进行硬编码

<ion-row>
    <ion-col col-auto>
      <ion-icon name="pin"></ion-icon>
    </ion-col>
    <ion-col>
      <span text-wrap>This is where I show address, and i'm trying to keep it aligned </span>
    </ion-col>
</ion-row>

【讨论】：

【解决方案2】：

对于您的修复，您需要添加 2 个 CSS 修复。

.ion-ios-pin{
   vertical-align: top;
   width: 3%;
}
.item-inner span {
   display: inline-block;
   width: 95%;
   float: right;
   white-space: normal;
}

在您的代码上测试

更新了添加white-space: normal;的代码

检查错误后更新代码

.ion-ios-pin{
       vertical-align: top;
       width: 12px;
}
.item-inner span {
       display: inline-block;
       width: calc(100% - 15px);
       float: right;
       white-space: normal;
}

【讨论】：

【解决方案3】：

您可以使用列表并将图标定义为项目符号。

li {
  list-style: none;
  width: 200px;
}

div { margin-left: 25px; }

li:before {
  font-family: 'FontAwesome';
  content: '\f19c';
  margin: 0 5px 0 -25px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <li text-wrap>This is where I show address, and i'm trying to keep it aligned </li>
</div>

【讨论】：

【解决方案4】：

请尝试下面的代码。你在css下面添加。

还有一点是，如果可能的话，然后将自定义类添加到此标签<ion-label>，以便标签 css 的其余部分保持原样。

.ios ion-label {
    display: flex;
}

并将右侧边距设置为此类ion-icon.ion-ios-pin.item-icon

ion-icon.ion-ios-pin.item-icon {
    margin-right: 10px;
}

希望这会有所帮助。

【讨论】：

但是我提供的代码中没有离子标签？ @Emipro Technologies Pvt。有限公司
但是使用这个类 .ios ion-label 如果它是动态生成的，你可以添加css。