React中SearchBooks组件书籍纵向堆叠，如何改为横向排列？

The issue here is how you're structuring the search results inside the <ol className="books-grid"> element. Right now, you're wrapping all your Book components inside a single <li> tag, which forces them to stack vertically (since <li> is a block-level element by default).

Here's how to fix it: #

Update the render method in your SearchBooks component to place each Book inside its own <li> (this is also more semantically correct for an ordered list):

// Inside SearchBooks.js render()
<div className="search-books-results">
  <ol className="books-grid">
    { results.length > 0 ? (
      results.map((book) => (
        <li key={book.id}>
          <Book book={book} updateShelf={onUpdateShelf} />
        </li>
      ))
    ) : (
      <li>
        <h4>No results for "{query}"</h4>
      </li>
    )}
  </ol>
  <Link to='/' className="return-home"></Link>
</div>

Why this works: #

Your books-grid class (from App.css) is likely styled to handle horizontal layout for direct child elements (like <li> tags). By putting each book in its own <li>, the grid styles can apply correctly—making the books arrange horizontally instead of stacking.

Bonus: Fix the ListBooks structure too (optional but recommended) #

Looking at your ListBooks code, you're also wrapping all books in a single <li> inside the books-grid ol. Even if it's working now, this isn't semantically correct and could cause layout issues later. You should update it to match the corrected SearchBooks structure:

// Inside ListBooks.js
<div className="bookshelf-books">
  <ol className="books-grid">
    { getBooksForShelf(shelf.key).map((book) => (
      <li key={book.id}>
        <Book book={book} updateShelf={onUpdateShelf}/>
      </li>
    ))}
  </ol>
</div>

That should get your search results displaying horizontally just like your shelf books!

内容的提问来源于stack exchange，提问作者3therk1ll