Question

我的身份验证面板如下所示：

如您所见，红色框显示为小。

源代码背后的代码：

HTML

<!-- Add your site or application content here -->
<div class="container">
    <div class="message">
        <h2 class="title">AUTHENTICATION</h2>
        <p class="info">Please sign in with username and password.</p>
        <br />
        <br />
        <div class="ui red message error">Wrong username or password.</div>
    </div>
    <div class="sign-in">
        <form class="ui form">

            <div class="field ui big left icon input">
                <input type="text" placeholder="Username">
                <i class="user icon"></i>
            </div>

            <div class="field ui big left icon input">
                <input type="password" placeholder="Password">
                <i class="lock icon"></i>
            </div>
            <div class="fluid ui blue button">Sign In</div>
        </form>
    </div>
</div>

CSS

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.message {
    display: block;
    width: 20%;
    height: 25%;
    background: #bbd0e6;
    font-family: 'Montserrat', sans-serif;
    margin-right: 6px;
}

.message, h2 {
    color: #FFFFFF;
    padding-left: 5px;
    padding-top: 5px;
}

.message, .info {
    color: #FFFFFF;
    padding-left: 5px;
    padding-top: 5px;
}

.message, .error {

}

.sign-in {
    display: flex;
    align-items: center;
    width: 15%;
    height: 25%;
    margin-left: 3px;
}

我尝试将红框的宽度设置为

.message, .error {
    width: 80%;
}

更改为：

似乎是，红色框的宽度与整个屏幕成比例，而不是 AUTHENTICATION 框。

如何确定宽度与 AUTHENTICATION 框成比例？

Answer 1

请改为尝试：

.message > error { width: 80%; }

在CSS中分配样式时使用,时，您告诉浏览器将该样式分配给事物列表。代码中的示例：

.message {
    display: block;
    width: 20%;
    height: 25%;
    background: #bbd0e6;
    font-family: 'Montserrat', sans-serif;
    margin-right: 6px;
}

.message, h2 {
    color: #FFFFFF;
    padding-left: 5px;
    padding-top: 5px;
}

.message, .info {
    color: #FFFFFF;
    padding-left: 5px;
    padding-top: 5px;
}

该剪辑定义了.message，然后重新定义了两次，同时还定义了h2和.info。我假设在所有情况下你实际上都试图找到.message的孩子（但我可能是错的）。请点击此链接获取更多信息：http://www.w3schools.com/css/css_combinators.asp

Answer 2

我用以下方法解决了问题：

.message {
    display: block;
    width: 20%;
    height: 25%;
    background: #bbd0e6;
    font-family: 'Montserrat', sans-serif;
    margin-right: 6px;
}

.message > h2 {
    color: #FFFFFF;
    padding-left: 5px;
    padding-top: 5px;
}

.message > .info {
    color: #FFFFFF;
    padding-left: 5px;
    padding-top: 5px;
}

.message > .error {
    width: 80%;
}

谢谢大家。

Div以奇数方式显示

2 个答案: