Css 寬度屬性將內容向左對齊

Question

什么是 upp 伙計們，所以每次我嘗試使我的內部 div 的邊框適合該 div 的內容時，所以邊框長度在頁面上不會 go ，div 最終會轉到我頁面的左側。 我正在使用 Css “width-fit content”屬性來實現這一點，它最終會填充空白空間，但它會將我的內容移動到頁面的左側。 我將把我的 CSS 和 JSX 放在下面，我正在構建一個 Todo APP 來響應。

我的 CSS 的小片段

 * {
 text-align: center;
 background-color: #2d2d33;
 color: white;
 text-align: center;
 align-items: center;
 align-content: center;
 border-radius: 15px;
 box-sizing: border-box;

}
.reload {
  justify-content:left

}

header h1{
  display: flex;
  justify-content: space-evenly;
  background-color: rgb(37, 54, 54);

}
.task {

  border: 3px solid rgb(99, 94, 94);
  width: fit-content
    
}

p {
  cursor: pointer; 
  font-size: 32px;
  color: white;
  color: rgb(107, 101, 101);
  font-weight: 500;
  transition: ease-out 0.7s;
}

我的 JSX

 return (
    <div>
      <header>
    <h1>Todo List</h1>
    </header>
      <div className='input-task'>
        <input onChange={getTask}></input>
        <button onClick={displayTask}>AddTask</button>
      </div>
      <div className='display-task'>
        {task.map((item) => {
            return (
            <div className='task'>
              <h3>{item}</h3>
              <button className='delete-btn' onClick={() => deleteTask(item)}>Delete Task</button>
              <button className='complete-btn' onClick={() => deleteTask(item)}>Completed</button>

            </div>
            )
        })}
      </div>
    </div>

謝謝。

Answer 1

嗨，您可以將 flex 用於任務 class 並證明中心，如果您從您那里發送照片來做這將更好地幫助我們