时间戳

首页 > 解决方案 > 如何将按钮标签放在左侧，将图标放在右侧？

html - 如何将按钮标签放在左侧，将图标放在右侧？

问题描述

所以我有一个项目列表，我想把标签文本放在左边，把复选图标放在右边，当我的文本很短时这个工作，但是当我添加 textOverflow 属性时，图标与其余文本一起隐藏： 这里是我的列表

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
                className="btn btn-lg btn-fill"
                style={{
                  width: "210px",
                  maxWidth: "300px",
                  border: "none",
                  backgroundColor: tag.color,
                  fontStyle: "bold",
                  cursor: "pointer",
                  padding: "10px",
                  marginBottom: "3px",
                  paddingRight: "80px",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  textAlign: "left"
                }}
                onClick={e => {
                  console.log("dd");
                }}
              >
                <span>{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>
);

标签： htmlcssreactjs

解决方案

您可以通过这种方式使用 flexbox：

.wrapper{
  width: 100px;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
}

.text{
  flex-basis: 80%;
  background-color: red;
  overflow: hidden;
}

.icon{
flex-basis 20%;
  position: relative;
  width: 20px;
  height: 20px;
  background-color: yellow;
}
<div class="wrapper">
  <div class="text">
  Halloooooooooooooo
  </div>
  <div class="icon">
  </div>
</div>

推荐阅读