flexbox не работает. Я хотел бы сделать кнопку (html вкладка) круглой

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть 2 вопроса. У меня есть код в файле .js.

Я бы хотел сделать кнопку круглой. Я пытался, как показано ниже, но она все еще квадратная.
Я хотел бы показать кнопки (с именем внизу) в направлении строки. Я указал для каждого, чтобы className =»btn-newroom» мог быть родительским.

 .btn-newroom {
  display: flex;
}

button {
  display: block;
  border-radius: 50%;
}

 <div className="new-room-form">
  <form onSubmit={handleSumbit}>
    <div className="btn-newroom">
      <div>
        <button
          className="create-room-btn"
          type="submit"
          onChange={handleChange}
        >
           
        </button>
        <div>New Room</div>
      </div>

      <div>
        <button className="create-room-btn" type="submit">
          K
        </button>
        <div>Kitchen</div>
      </div>

      <div>
        <button className="create-room-btn" type="submit">
          H
        </button>
        <div>HoF</div>
      </div>

      <div>
        <button className="create-room-btn" type="submit">
          D
        </button>
        <div>Delivery</div>
      </div>
    </div>
  </form>
</div>

1. вы визуализируете это через React? Если not className недопустимый html, вам нужно просто использовать class . Внесение только этого изменения позволит большинству вашего кода отображаться так, как ожидалось, хотя это потребует настройки.

Ответ №1:

Решение для 1 :

чтобы сделать кнопку точной окружностью, вы должны указать высоту кнопки, поскольку она принимает ширину из текста внутри нее, но высота остается неизменной.

Поэтому вместо использования этого

 button {
  display: block;
  border-radius: 50%;
}

Используйте что-то вроде этого (настройте высоту по своему усмотрению)

 button {
  height: 100px;
  min-width: 100px;
  display: block;
  border-radius: 50%;
}

Решение для 2:
Чтобы отобразить что-либо в гибком формате и в виде строки, вы должны указать направление потока

итак, в вашем случае замените

 .btn-newroom {
  display: flex;
}

Автор:

 .btn-newroom {
  display: flex;
  flex-direction: "row";
}

Если вы хотите иметь кнопку и текст в качестве столбца, используйте

 .btn-newroom {
  display: flex;
  flex-direction: "column";
}