时间戳

首页 > 解决方案 > 定位输入不生效

css - 定位输入不生效

问题描述

嗨，我正在做一个名为 todo-list 的项目。但似乎当我做填充、边距或定位时它不起作用。谢谢！

CreateArea.jsx -

import react from 'react';

//FINAL STEP: Create a database that store info about the todolist tasks!

function CreateArea() {
    return (
        <div className="mainbox">
            <div className="inputdiv">
                <input type="text" />
            </div>
        </div>
    );
}

export default CreateArea;

style.css 的一部分 -

.mainbox {
  width: 300px;
  height: 650px;
  background-color: #f5ba13;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  border-radius: 35px;
  padding-left: 300px;
  margin: 20px auto;
}

它看起来像这样 - 链接到图片

标签： cssjsx

解决方案

如果要使用left, top, right and bottom需要更改默认位置的属性，即静态，则可以使用绝对或相对。如果您选择absolute需要将父 div 设置为相对位置，否则，您的元素将相对于<body>.

使用绝对位置的示例：

   .mainbox {
       position: relative
       width: 300px;
       height: 650px;
       background-color: #f5ba13;
       box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
       border-radius: 35px;
       padding-left: 300px;
       margin: 20px auto;
     }
           
    .inputdiv {
            position: absolute;
            top: 100px;
            left: 200px;
        }

推荐阅读