代码之家 › 专栏 › 技术社区 › user9026

项目登录页面(freecodecamp)定价设计

flexbox css html

user9026 · 技术社区 · 1 年前

我正在从freecodecamp学习网站构建一个项目登录页面。我必须设计以下部分

现在,以下是我的 HTML 和 CSS 这部分的代码。

.price-tag {
    background-color: antiquewhite;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5em 2em 0.5em 2em;
}

button {
    padding: 0.8em 1.1em;
    background-color:coral;
    border: none;
    font-size: 1em;
}

button:hover {
    background-color: aqua;
    cursor: pointer;
}

.price-category {
    background-color: aqua;
    width: 100%;
}

.price {
    font-size: 1.5em;
    font-weight: 700;
}

<div class="price-tag">
        <div class="price-category">
            <h3 >TENOR TROMBONE</h3>
        </div>

        <p class="price">$600</p>

        <div>
            <p>Lorem ipsum.</p>
            <p>Lorem ipsum.</p>
            <p>Lorem ipsum dolor.</p>
            <p>Lorem ipsum.</p>
        </div>

        <button type="button">SELECT</button>
</div>

我很接近,但还没有完全理解。的背景颜色 TENOR TROMBONE 不会占据容器的整个宽度。此外,下面的文本是左对齐的,而不是居中对齐的。我用flexbox来整理这些物品。我该如何改进这一点?

谢谢

1 回复 | 直到 1 年前

tomerpacific 1 年前

您遇到的问题有两个原因:

您尚未明确定义标题(h3)在您的内部的对齐方式 价格类别 div
您已将padding(padding:0.5em 2em 0.5em 2em;)添加到容器div中。

修改这两个问题,你可以看到输出是你想要的。

.price-tag {
    background-color: antiquewhite;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    align-items: center;
}

button {
    padding: 0.8em 1.1em;
    background-color: coral;
    border: none;
    font-size: 1em;
}

button:hover {
    background-color: aqua;
    cursor: pointer;
}

.price-category {
    background-color: aqua;
    width: 100%;
}

.price-category > h3 {
  text-align: center;
}

.price {
    font-size: 1.5em;
    font-weight: 700;
}

<div class="price-tag">
        <div class="price-category">
            <h3 >TENOR TROMBONE</h3>
        </div>

        <p class="price">$600</p>

        <div>
            <p>Lorem ipsum.</p>
            <p>Lorem ipsum.</p>
            <p>Lorem ipsum dolor.</p>
            <p>Lorem ipsum.</p>
        </div>

        <button type="button">SELECT</button>
</div>

推荐文章

JWWalker · CSS的resize属性可以用来调整flex列宽吗?

1 年前

Sidaqpreet Singh · 为什么当设置为包裹时,柔性包裹会导致横轴出现间隙?

1 年前

rifx · 在kendoTreeViewNodeTemplate(Angular)中设置数据项的样式

1 年前

Fox L · 每行4个项目,但如果少于4个项目则留空?

1 年前

Zack Riquelme · 如何使用CSS将HTML的<header>中的<a>和<nav>内容在同一个父框中左右拆分?

1 年前

JobHunter69 · 为什么这个组件不填充整个宽度?

1 年前

Vasantha Kalyani · Flexbox Html CSS设置位置问题[重复]

1 年前

coder · 边界半径不适用于容器元素

1 年前

user9026 · 项目登录页面(freecodecamp)定价设计

1 年前

Bo Thompson · 根据需要调整柔性物品的高度,但不得超过容器

1 年前