javascript - 并排显示两个列表项

Question

我正在使用 React 15 从两个独立的组件生成两个列表。我希望列表并排对齐。像这样的东西

但我得到的是

现在的问题是

• 这是两个独立的组件，我无法将它们合并为一个
• 在 React 15 中应该总是有一个父包装元素，因此我不能将两个列表包装在一个 ul 中。
• 将有两个ul元素是块元素，因此第二个ul将从下一行开始。

有任何 React 或 CSS 解决方案吗？

任何帮助将不胜感激。 代码沙盒链接

let List1 = function() {
  return (
    <ul className="list1">
      <li>List1</li>
      <li>List2</li>
      <li>List3</li>
      <li>List4</li>
      <li>List5</li>
    </ul>
  );
};

let List2 = function() {
  return (
    <ul className="list2">
      <li>List6</li>
      <li>List7</li>
      <li>List8</li>
      <li>List9</li>
      <li>List10</li>
    </ul>
  );
};
class App extends React.Component {
  render() {
    return (
      <div>
        <List1 />
        <List2 />
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

.App {
  font-family: sans-serif;
  text-align: center;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  width: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>

	<div id="root"></div>

标签： javascripthtmlcssreactjs

Answer 1

这有点 hacky，但您可以将 UL 更改为display: inline.

let List1 = function() {
  return (
    <ul className="list1">
      <li>List1</li>
      <li>List2</li>
      <li>List3</li>
      <li>List4</li>
      <li>List5</li>
    </ul>
  );
};

let List2 = function() {
  return (
    <ul className="list2">
      <li>List6</li>
      <li>List7</li>
      <li>List8</li>
      <li>List9</li>
      <li>List10</li>
    </ul>
  );
};
class App extends React.Component {
  render() {
    return (
      <div>
        <List1 />
        <List2 />
      </div>
    );
  }
}
ReactDOM.render(<App />, root);

.App {
  font-family: sans-serif;
  text-align: center;
}
ul {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  width: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>

	<div id="root"></div>