Css 使2 UL彼此相邻

我想让列表彼此相邻，我尝试了一些方法，比如inlineblock、float:left 但它不起作用。 如果有人能告诉我该做什么并向我解释，我会很高兴：）

---

您可以使用

display:flex

，同时使用以下属性：

.目标{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
弯曲方向：行；
}

这将使

.target

元素处于灵活状态，其中项目在中心对齐并且彼此相邻

您还可以使用

网格

：

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

---

您可以使用

display:flex

，同时使用以下属性：

.目标{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
弯曲方向：行；
}

这将使

.target

元素处于灵活状态，其中项目在中心对齐并且彼此相邻

您还可以使用

网格

：

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

---

我正在发布一些我尝试过的东西，这是预期的效果。我在

App

组件中添加了

Home

组件和

Contact

组件。这似乎奏效了。以此代码为例，尝试继续您的项目。您还可以在CSS显示属性中检查

flex

，这也可能具有相同的效果。希望对你有帮助快乐编码

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>
  );
}

从“React”导入React；
导入“/styles.css”；
函数Home（）{
返回（

家
家
家
）；
}
功能联系人（）{
返回（

接触
接触
接触
）；
}
导出默认函数App（）{
返回(
);
}

我正在发布一些我尝试过的东西，效果如预期。我在

App

组件中添加了

Home

组件和

Contact

组件。这似乎奏效了。以此代码为例，尝试继续您的项目。您还可以在CSS显示属性中检查

flex

，这也可能具有相同的效果。希望对你有帮助快乐编码

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>
  );
}

从“React”导入React；
导入“/styles.css”；
函数Home（）{
返回（

家
家
家
）；
}
功能联系人（）{
返回（

接触
接触
接触
）；
}
导出默认函数App（）{
返回(
);
}

您可以将两个列表组件包装在一个div中，然后使用flex将它们并排显示。试试这个：

.list容器{
显示器：flex；
}

人员名单

第一项
第二项

什瓦齐

第一项
第二项

您可以将两个列表组件包装在一个div中，然后使用flex将它们并排显示。试试这个：

.list容器{
显示器：flex；
}

人员名单

第一项
第二项

什瓦齐

第一项
第二项

是react js还是md文件？？？您好，我知道您是Stackoverflow新手，请检查发布问题的正确方式。您已上载问题并删除了一些停止图像加载的行。当我浏览代码时，我建议您将

width:50vw

设置为两个无序列表。这可以让你的列表呈现出你所期望的效果。好的，下次我会以这种格式发布我的问题。但在我尝试添加宽度后，我仍然无法将它们并排渲染：50vw是react js还是md文件？？？嗨，我知道你是Stackoverflow新手，请检查发布问题的正确方式。您已上载问题并删除了一些停止图像加载的行。当我浏览代码时，我建议您将

width:50vw

设置为两个无序列表。这可以让你的列表呈现出你所期望的效果。好的，下次我会以这种格式发布我的问题。但在我尝试添加宽度后，我仍然无法将它们并排渲染：首先，谢谢你的答案，它几乎有效，但标题仍在第一个列表下，我无法移动。首先，感谢你的答案，它几乎有效，但标题仍在第一个列表下，我无法移动它