Question

中有两个html元素

li元素，我需要把这两个放在同一行，

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<li class="linkedin">
       <i class="fa fa-linkedin"></i>
       <a href="#" target="_blank">https://www.linkedin.com/in/mehmet-yener-yilmaz-
           833a07101/</a>
    </li>

＆＃13;

sive，我需要一些css技巧来有效地处理它

已编辑：我尝试this，其他一些人喜欢它，但无法解决我的问题

Answer 1

只需将 display：flex 添加到li的css

.sidebar-wrapper .contact-list li {
    margin-bottom: 15px;
    display: flex;
}

Answer 2

如果单行没有任何空格，请添加word-break:break-all来破解字词。和flex使用已使用的图标获取正确的内嵌文本。

只需添加以下css

即可

    .sidebar-wrapper .contact-list li {
        margin-bottom: 15px;
        word-break: break-all; /* Added */
        display:flex;   /* Added */
    }

Answer 3

这是解决方案。它将为您提供长文本和省略号的省略号。整个 linkedin网址保留工具提示。

＆＃13;

.linkedin { 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.linkedin > a {
  vertical-align: middle;
}

＆＃13;

将两个html元素放在自定义css的同一行中

3 个答案: