【问题标题】: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下面添加。

        还有一点是,如果可能的话,然后将自定义类添加到此标签&lt;ion-label&gt;,以便标签 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。
        猜你喜欢
        • 2015-04-19
        • 2021-08-10
        • 2017-03-04
        • 1970-01-01
        • 2013-11-04
        • 1970-01-01
        • 1970-01-01
        • 2023-03-15
        相关资源
        最近更新 更多