主页 / 问题 / 1602847
Accepted
TopTTeDHbIu-DeJLbFuH4uk
Asked:2024-12-19 22:10:18 +0000 UTC2024-12-19 22:10:18 +0000 UTC

无法将元素定位在页面的中心和末尾

  • 772

大家好。如何定位屏幕截图中所示的元素？请注意，使用绝对定位或translateX() 函数不会产生所需的结果。页眉应该是橡胶的，也就是说，缩放时，文本会收缩到页面的左侧。当使用上述方法时，遗憾的是，结果是否定的。在此输入图像描述

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iRobot</title>
    <link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet">
    <!-- STYLES -->
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/colors.css">
    <link rel="stylesheet" href="styles/header.css">
</head>
<body>
<div class="header-container">
<!--    <div class="header">-->
        <div class="header-carousel">
            <div class="carousel-item">Order by 12/19/24 at 11:59 PM EST for 2-day shipping on all robot orders for
                delivery
                by 12/24/24.
                <a href="https://www.irobot.com/en_US/deals.html" target="_blank">Select preferred shipping option at
                    checkout.</a></div>
            <div class="carousel-item carousel-item-hidden">New Markdown: 45% off the Roomba Combo® i5+ Self-Emptying
                Robot
                Vacuum and Mop. <a href="https://www.irobot.com/en_US/roomba-combo-i5-series-robot-vacuum-and-mop/Roomba-Combo-i5-Series-Robots.html">Shop Deal</a>
            </div>
        </div>
        <div class="header-link">
            <a href="https://homesupport.irobot.com/s/">Support</a>
            <a href="https://www.irobot.com/en_US/login">Order Status</a>
            <a href="https://www.irobot.com/en_US/login">Login</a>
            <span class="header-language">English (United States)</span>
        </div>
<!--    </div>-->
</div>

<script src="scripts/header.js"></script>
</body>
</html>

CSS：

.header-container {
    display: flex;
    /*justify-content: space-between;*/
    justify-content: center;
    align-items: center;
    height: 2.5rem;
    background-color: var(--background-header);
}

.header {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.header-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: clamp(100px, 100%, 500px);
}

.carousel-item {
    text-align: center;
}

.carousel-item-hidden {
    display: none;
}
html

1 个回答

  1. Best Answer

    就是这样。我做了一切justify-content:flex-end并设置了中央旋转木马，max-width使其不会变窄，而是填充左侧的空白。您必须根据菜单和外部容器的大小自行选择这个max-width，以便它最初看起来正好位于中心。

    .header-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 2.5rem;
    background-color: var(--background-header);
    border: 1px solid black;
    padding: 5px;
    gap: 5px;
}

.header {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.header-carousel {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    max-width: 315px;
    border: 1px solid black;
}

.carousel-item {
    text-align: center;
}

.header-link {
  border:1px solid black;
}

.carousel-item-hidden {
    display: none;
}
    <div class="header-container">
<!--    <div class="header">-->
        <div class="header-carousel">
            <div class="carousel-item">Order by 12/19/24 at 11:59 PM EST for 2-day shipping on all robot orders for delivery by 12/24/24.
          </div>
        </div>
        <div class="header-link">
            <a href="https://homesupport.irobot.com/s/">Support</a>
            <a href="https://www.irobot.com/en_US/login">Order Status</a>
            <a href="https://www.irobot.com/en_US/login">Login</a>
        </div>
<!--    </div>-->
</div>

    • 0

相关问题