问右侧的绝对位置顺风元素:0不起作用
EN

Stack Overflow用户

提问于 2021-09-17 23:31:48

回答 1查看 178关注 0票数 0

我有一个红色的输入，这是绝对的位置在灰色div下面(附图)。我有点困惑，为什么right-2不能工作，因为我想让它明显地包含在盒子里。任何帮助都是最好的。谢谢

<div className="grid grid-cols-7 gap-0 h-full mx-2">
                        <div className="cursor-pointer border-gray-200 bg-gray-100 h-full">
                            <span className="text-sm mb-0">Single or Couple</span>
                            <div className="text-lg -mt-1">Single</div>
                        </div>
                        <div className="relative border-r border-gray-200 bg-gray-200 h-full">
                            <input
                                id="salary"
                                name="salary"
                                className="peer text-xl absolute left-2 right-2 top-5 rounded-md bg-red-200"
                                placeholder="Salary"
                                type="number"
                            />
                            <label
                                htmlFor="salary"
                                className="absolute left-2 top-0 bg-green-100"
                            >
                                Salary
                            </label>
                        </div>
                        <div>Test</div>
                        <div>Test</div>
                        <div>Test</div>
                        <div>Test</div>
                        <button>Go!</button>
                    </div>

html

css

tailwind-css

回答 1

Stack Overflow用户

发布于 2021-09-18 01:22:53

我猜问题可能是你同时使用了left-2和right-2，这使得right属性没有效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box {
        position: relative;
        background: gray;
        width: 400px;
        height: 170px;
    }

    .left, .right {
        position: absolute;
        width: 200px;
        height: 50px;
    }

    .left {
        left: 0;
        background: pink;
    }

    .right {
        top: 60px;
        right: 0;
        background: lightblue;
    }

    .left.right {
        top: 120px;
        background: lightgreen;
    }
</style>
<body>
<div class="box">
    <div class="left">left: 0;</div>
    <div class="right">right: 0; // has effect</div>
    <div class="left right">left: 0;<br/>right: 0; // no effect</div>
</div>
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69230425

复制

相似问题

问右侧的绝对位置顺风元素:0不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问右侧的绝对位置顺风元素:0不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问右侧的绝对位置顺风元素:0不起作用
EN