Question

我已经努力了几个小时，试图将按钮内的图标和文本对齐到左侧。当前，按钮处于拉伸状态，如下所示：

我希望人字形箭头和文本在按钮内保持对齐。如何实现呢？（我正在使用Microsoft的ui-fabric，不要认为此处的CSS会干扰，即使我删除了它们或将DefaultButton更改为常规Button，我也没有对齐任何文本）

渲染方法：

public render(): JSX.Element {
    const { isCollapsed } = this.state;
    const { buttonText, collapsibleSectionText } = this.props;
    return (
        <div>
            <DefaultButton
                onClick={this._toggleCollapse} className="CollapsibleSection"
            >
                {isCollapsed ? <i className="ms-Icon ms-Icon--ChevronUp" aria-hidden="true" /> : <i className="ms-Icon ms-Icon--ChevronDown " aria-hidden="true" />}
                &nbsp; <p>{buttonText}</p>
            </DefaultButton>
            {isCollapsed && collapsibleSectionText}
        </div>
    );
}

css：

.CollapsibleSection {
margin-top: 2%;
width: 100%;

}

Answer 1

DefaultButton组件具有属性text-align: center;。您可以签入他们的官方文档。我建议您应该尝试尝试text-align: left;，如果那没有覆盖Fabric的CSS规则，那么请尝试查看您的规则是否适用，因为Fabric的规则可能比CSS规则更具特异性。如果这不起作用，那么您需要覆盖fabric的display属性，并说以下内容：

.CollapsibleSection {
  margin-top: 2%;
  width: 100%;
  display: flex; //overriding fabric's display inline-block;
  justify-content: flex-start:
}

Answer 2

嗨，我只需要添加text-align: left即可使其工作

.CollapsibleSection {
    margin-top: 2%;
    text-align: left;
    width: 100%;
}

Answer 3

快速解答：

justify-content: flex-start

如果您想了解更多有关它的信息，可以玩这个精彩的游戏，这将使您对flexbox及其在其中的位置有很好的了解。

https://flexboxfroggy.com/

按钮内的左对齐内容

3 个答案: