css-无法将文本保持在图标旁边

Question

我正在制作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

Answer 1

对于您的修复，您需要添加2个css修复程序。

java.lang.IncompatibleClassChangeError: Class   org.apache.felix.connect.felix.framework.ServiceRegistrationImpl$ServiceReferenceImpl 
does not implement the requested interface org.osgi.resource.Capability
at org.apache.felix.connect.felix.framework.capabilityset.CapabilitySet.addCapability(CapabilitySet.java:63)
at org.apache.felix.connect.felix.framework.ServiceRegistry.registerService(ServiceRegistry.java:124)

在您的代码上进行测试

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

的代码

BUG CHECKING后的更新代码

white-space: normal;

Answer 2

您可以使用网格布局来实现此目的。将图标和文本放在一行中的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>

Answer 3

请尝试以下代码。您可以在下面添加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;
}

希望这有帮助。

Answer 4

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

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>