Question

我有一个动态父div，其宽度为百分比，我有一个带有排序图标和文本的div，我只想在标题文本右侧排序图标。

Here是我想要实现的附加输出。

.parent{ width:150px; border:1px solid red} 
.fa-caret-up:after{ content: "v"; border:1px solid red}

<div class="parent">
<span>display inline not working</span>
<span class="fa-caret-up"></span>
</div>

我希望在文字

之后右上方有插入符号图标

Answer 1

检查这个希望这可以解决你的问题右上角

.parent{ width:150px; border:1px solid red} 
.fa-caret-up:after{ content: "v"; border:1px solid red;float:right}

<div class="parent">
<span class="fa-caret-up"></span>
<span>display inline not working</span>
</div>

文字右侧

.parent{ width:150px; border:1px solid red} 
.fa-caret-up:after{ content: "v"; border:1px solid red;float:right}

<div class="parent">
<span>display inline not working</span>
<span class="fa-caret-up"></span>
</div>

感谢

Answer 2

您最终可以尝试使用display: flex

修改

您只能将flex: 0 0 auto; max-width: 100%;应用于.fa-caret-up，它更接近您想要的结果。

＆＃13;

.parent{ width:150px; border:1px solid red; display: flex; } 
.fa-caret-up { flex: 0 0 auto; max-width: 100%;}
.fa-caret-up:after{ content: "v"; border:1px solid red}

＆＃13;

<div class="parent">
<span>display inline not working</span>
<span class="fa-caret-up"></span>
</div>

＆＃13;

Answer 3

您可以在父元素上使用固定的表格布局，只需设置第一个子跨度的宽度即可。您可以在伪margin元素上使用:after来缩进图标和文本之间的空格。

这是一个例子

＆＃13;

.parent { 
  width: 150px;
  border: 1px solid red;
  display: table;
  table-layout: fixed;
  white-space: wrap;
}

.fa-caret-up:after { 
  content: "v"; 
  border: 1px solid red;
  margin-left: 4px;
}

.parent span {
  display: table-cell;
}

.parent span:first-child {
  width: 75%;
}

＆＃13;

<div class="parent">
  <span>display inline not working</span>
  <span class="fa-caret-up"></span>
</div>

＆＃13;

Answer 4



    .parent {
    	border: 1px solid #f00;
    }
    
    .caret {
    	display: inline-block;
        padding: 10px; /* if required */
    }
    
    .caret:after {
    	content: '\2191';
        position: absolute;
        margin-left: 10px;
    }
   <div class="parent">
	<span class="caret">Some text</span>
</div>

将排序图标右侧放置在动态div的头文本中？

4 个答案: