react组件中的css样式

我想显示按钮行的方向。 我已经给出了disply:flex，但它仍然显示该列。 它应该是按钮下面有一个名称的第一个字符 这些按钮应该紧挨着。 不像左边的按钮和右边的名字。 如果我能得到帮助，我将不胜感激

RoomList.js

import React from 'react';
import './RoomList.css';
import PropTypes from 'prop-types';

const RoomList = ({ roomList }) => {
  return (
    <div>
      {roomList.map((room) => {
        const firstToChar = room.split('');
        const firstChar = firstToChar[0];
        return (
          <div>
            <li className="list">
              <div className="room-list">

                <button type="submit">{firstChar}</button>

                <div>{room}</div>

              </div>
            </li>
          </div>
        );
      })}
    </div>
  );
};

RoomList.propTypes = {
  roomList: PropTypes.func.isRequired,
};

export default RoomList;

---

flex应该在文件室列表中，而不是问题在于您生成的HTML。按房间列出一份清单。这不是你想要的，你想要一张单子，在单子上一个房间一个项目

按钮{
高度：40px；
最小宽度：40px；
显示：块；
边界半径：50%；
边缘底部：5px；
}
.房间清单{
}
.名单{
列表样式类型：无；
显示器：flex；
}

K
厨房


B
浴室

，而不是“列”。HTML仍然无效。“列表”很可能是一个

，孩子们的“房间列表”是

，它是无效的，但这并不是真正的问题。

button {
  height: 40px;
  min-width: 40px;
  display: block;
  border-radius: 50%;
  margin-bottom: 5px;
}

.room-list {

}

.list {
  list-style-type: none;
  display: flex;
}