Html 如何在左边放置按钮标签，在右边放置图标？

因此，我有一个项目列表，我想将标签文本放在左侧，将复选图标放在右侧。当我的文本较短时，此操作有效，但当我添加textOverflow属性时，图标将与其余文本一起隐藏：

const allTags=(
{this.state.allTagsList.map（（标记，i）=>{
返回(
{
控制台日志（“dd”）；
}}
>
{tag.text}
);
})}
);

你可以这样做

 const allTags=(
          <Popover style={{width:"auto"}} id="popover-basic" title={<h6 style={{textAlign:"center",fontFamily:"verdana",color:"#8f9091",fontStyle:"bold",margin:"8px"}}>
          Créer une etiquette
          </h6>}>
          <div>
          {this.state.allTagsList.map((tag,i)=>{
            return <div>
            <div style={{display:"inline"}}><Button id="Button1" className="btn btn-lg btn-fill"  onClick={(e)=>{console.log("dd")}}>
            <span id="Test">{tag.text}</span>
            <span className="fas fa-check"/>
            </Button>
            </div>
            <div style={{display:"inline"}}>
            <Button className="btn btn-circle-micro" style={{borderRadius: "30px",border:"none", width:"25px",height:"25px",textAlign:"center",padding: "1px 0",marginRight : '2px',marginTop:"8px"}}
            >
            <i className="fas fa-pen" style={{pointerEvents:"none",transform:"scale(1,1)"}}/></Button>
            </div>
            </div>
          })}
          </div>
          </Popover>
        );

---

你可以这样做

 const allTags=(
          <Popover style={{width:"auto"}} id="popover-basic" title={<h6 style={{textAlign:"center",fontFamily:"verdana",color:"#8f9091",fontStyle:"bold",margin:"8px"}}>
          Créer une etiquette
          </h6>}>
          <div>
          {this.state.allTagsList.map((tag,i)=>{
            return <div>
            <div style={{display:"inline"}}><Button id="Button1" className="btn btn-lg btn-fill"  onClick={(e)=>{console.log("dd")}}>
            <span id="Test">{tag.text}</span>
            <span className="fas fa-check"/>
            </Button>
            </div>
            <div style={{display:"inline"}}>
            <Button className="btn btn-circle-micro" style={{borderRadius: "30px",border:"none", width:"25px",height:"25px",textAlign:"center",padding: "1px 0",marginRight : '2px',marginTop:"8px"}}
            >
            <i className="fas fa-pen" style={{pointerEvents:"none",transform:"scale(1,1)"}}/></Button>
            </div>
            </div>
          })}
          </div>
          </Popover>
        );

---

您可以通过以下方式使用flexbox：

.wrapper{
宽度：100px；
位置：相对位置；
显示器：flex；
flex-flow：行nowrap；
}
.文本{
弹性基准：80%；
背景色：红色；
溢出：隐藏；
}
.图标{
弹性基准20%；
位置：相对位置；
宽度：20px；
高度：20px；
背景颜色：黄色；
}

喂

您可以通过以下方式使用flexbox：

.wrapper{
宽度：100px；
位置：相对位置；
显示器：flex；
flex-flow：行nowrap；
}
.文本{
弹性基准：80%；
背景色：红色；
溢出：隐藏；
}
.图标{
弹性基准20%；
位置：相对位置；
宽度：20px；
高度：20px；
背景颜色：黄色；
}

喂

发生这种情况是因为您的图标是隐藏文本的一部分

实际上，您可以将图标添加为伪元素，它将按照您的需要工作

button{
  width: 100px;
}

button span{
  width: 50px;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
}

button::after {
    font-family: "Font Awesome 5 Brands"; content: "\f099";
  }
<button>
    <span>Some giant text</span>
</button>

钮扣{
宽度：100px；
}
按钮跨度{
宽度：50px；
溢出：隐藏；
空白：nowrap；
显示：内联块；
文本溢出：省略号；
}
按钮：：之后{
字体系列：“字体五大品牌”；内容：“\f099”；
}
一些巨大的文本

---

下面是一个示例：

之所以发生这种情况，是因为您的图标是隐藏文本的一部分

实际上，您可以将图标添加为伪元素，它将按照您的需要工作

button{
  width: 100px;
}

button span{
  width: 50px;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
}

button::after {
    font-family: "Font Awesome 5 Brands"; content: "\f099";
  }
<button>
    <span>Some giant text</span>
</button>

钮扣{
宽度：100px；
}
按钮跨度{
宽度：50px；
溢出：隐藏；
空白：nowrap；
显示：内联块；
文本溢出：省略号；
}
按钮：：之后{
字体系列：“字体五大品牌”；内容：“\f099”；
}
一些巨大的文本

---

这里有一个例子：

很高兴我能帮上忙，顺便说一句，这里有一个开始使用flexbox的有用指南；）很高兴编码很高兴我能帮上忙，顺便说一句，这里有一个开始使用flexbox的有用指南；）快乐编码这是真的我忘了把它们分开很多这是真的我忘了把它们分开很多