Рендеринг 2 UL рядом друг с другом

Question

Я хотел бы отобразить список рядом друг с другом, я пробовал несколько вещей, таких как inlineblock, float: left, и он не работал. я буду рад, если кто-нибудь скажет мне, что делать и объяснит мне:)

[App][1]
[calling the 2 list components][2]
[first list jsx][3]
[first list css][4]
[second list jsx][5]
[second list css][6]


      [1]: https://i.stack.imgur.com/1qyDX.png
      [2]: https://i.stack.imgur.com/xHmNO.png
      [3]: https://i.stack.imgur.com/evWa2.png
      [4]: https://i.stack.imgur.com/5WJBl.png
      [5]: https://i.stack.imgur.com/xwSqB.png
      [6]: https://i.stack.imgur.com/H6LyZ.png

Answer 1

Я публикую кое-что, что я попробовал, это работает как ожидалось. Я добавил Home компонент и Contact компонент в App компонент. Это похоже на работу. Используйте этот код в качестве примера и попробуйте продолжить ваш проект. Вы также можете проверить flex в CSS свойстве display, это также может иметь тот же эффект. Надеюсь, это поможет !! .. Счастливое кодирование !!

import React from "react";
import "./styles.css";
function Home(){
   return (<ul style={{position:'absolute',display:'inline',
   background:'skyblue',width:'50vw',left:0}}>
        <li>Home</li>
        <li>Home</li>
        <li>Home</li>
      </ul>);
}
function Contact(){
  return (<ul style={{position:'absolute',display:'inline',
  background:'red',width:'50vw'}}>
         <li>Contact</li>
         <li>Contact</li>
         <li>Contact</li>
       </ul>);
}
export default function App() {
  return (
    <div className="App">
    <Home/>
      <Contact />
    </div>
  );
}

Answer 2

вы можете использовать display: flex с этими свойствами вместе с ним:

.target {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
}

это поместит элемент .target в гибкое состояние, когда элементы были выровнены по центру и расположены рядом друг с другом!

также можно использовать grid:

.target {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-gap: 2rem;
}

Answer 3

Вы можете обернуть два компонента списка в div и затем использовать flex, чтобы отобразить их рядом. Попробуйте это:

.list-container {
  display: flex;
}

<div class="list-container">
  <div class="person-list">
    Person List
    <ul>
      <li>First item</li>
      <li>Second item</li>
    </ul>
  </div>
  <div class="shwazi">
    Shwazi
    <ul>
      <li>First item</li>
      <li>Second item</li>
    </ul>
  </div>
</div>