html/css将文本与新行中的图标对齐_Html_Css

html/css将文本与新行中的图标对齐

html css

html/css将文本与新行中的图标对齐,html,css,Html,Css,我有以下代码，基本上只是一个图标和一行文本。当文本进入新行时，它从开头开始，我想将它移到右边，这样文本始终与图标在同一行。它应该总是从同一行开始，第一行从我有图标的地方开始 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l

我有以下代码，基本上只是一个图标和一行文本。当文本进入新行时，它从开头开始，我想将它移到右边，这样文本始终与图标在同一行。它应该总是从同一行开始，第一行从我有图标的地方开始

    <html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .segmentLabel {
            background-color: #f9f9f9;
            padding: 15px;
            border: solid 1px #ebebeb !important;
            border-radius: 10px !important;
            word-break: break-word;
        }
        
    </style>
</head>
<body>
<div class="row">
    <div class="col-xs-8" style="padding-top: 5px">
        <a class="link" href="javascript:void(0);" data-time="${time}">
            <span class="text-left segmentLabel" style="padding-top: 3px">
                <i class="fa fa-road text-left"></i> This is just a sample text. This is just a sample text. This is just a sample text. This is just a sample text. This is just a sample text.
            </span>
        </a>
    </div>
    <div class="col-xs-4" style="padding-top: 5px">  
        <span class="text-left segmentLabel" style="padding-top: 3px">
                This is just a sample text.
            </span>
    </div>
</div>
<body>
<html>


.分段标签{
背景色：#f9f9f9；
填充：15px；
边框：实心1px#ebebebeb！重要；
边界半径：10px！重要；
断字：断字；
}
这只是一个示例文本。

正如你们所看到的，若你们运行这个例子，我希望得到和图标一致的文本

我试着用你的代码复制它，但它没有中断到下一行。但是，为了将其强制到同一行，您可以尝试以下操作：

.segmentLabel {
  display: flex;
  flex-direction: row;
}

你也可以申请：

display: inline-block;

请让我们知道这是否有效。

完整代码：

将此属性应用于segmentLabel类
```
    display: flex;
```

完整代码：

     <div class="col-md-8">
       <a class="link">
        <span class="text-left segmentLabel">
          <i class="fa-fa road text-left"></i>
          <p>hi</p>
        </span>
       </a>
      </div>

请添加生成的HTML代码，添加css部分，使其可复制！

     segmentLabel {
       display: flex;
     }