时间戳

首页 > 解决方案 > 在屏幕上放置一系列标签

html - 在屏幕上放置一系列标签

问题描述

我的 React Web 应用程序中有以下功能：

function DisplayInfo(props) {
    const flexStyle = {
        position: 'absolute',
        zIndex: 1,
        margin: 20,
        justifyContent: 'space-between',
        alignItems: 'center'
    };

    const labelStyle = {        
        zIndex: 1,
        margin: 20
    };

    return (      
        <div className="flex-container" style={flexStyle}>
            <label style={labelStyle}>
                Data1: {props.data}
            </label>
            <label style={labelStyle}>
                {props.moreInfo}
            </label>
            <label style={labelStyle}>
                {props.interestingMessage}
            </label>
        </div>  
    );
}

我的目标是在屏幕上获得一个水平的、均匀分布的列表；但是，我刚刚将所有内容都放在了屏幕的左上角。我试过justifyContent: 'center'了，但如果没有区别。

请问有人可以把我放在正确的css路径上吗？

标签： htmlcssreactjs

解决方案

为了使该justifyContent属性起作用，您首先需要将其设置为弹性容器。此外，要使您的项目均匀分布，而不是space-between，请使用以下命令：

const flexStyle = {
    display: 'flex',
    position: 'absolute',
    zIndex: 1,
    margin: 20,
    justifyContent: 'space-evenly',
    alignItems: 'center'
};

除了上述之外，我注意到容器是绝对定位的。添加widthof100%将为您解决问题。

推荐阅读