I am trying to display a row of buttons instead of columns on my webpage. I have used display:flex but it is still showing as a column. What I want is for each button to display the first character of its name underneath it, with all buttons lined up next to each other. Currently, the button is on the left and the name is on the right. Any help would be greatly appreciated.
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;
RoomList.css
button {
height: 40px;
min-width: 40px;
display: block;
border-radius: 50%;
margin-bottom: 5px;
}
.room-list {
}
.list {
list-style-type: none;
display: flex;
}