<section> <h2>图书列表</h2> <ul> <li> <img src="book1.jpg" alt="book1"> <h3>《JavaScript权威指南》</h3> <p>作者：David Flanagan</p> <p>出版日期：2011年</p> <p>出版商：人民邮电出版社</p> <p>ISBN码：9787115266102</p> <button type="button">添加到购物车</button> </li> <li> <img src="book2.jpg" alt="book2"> <h3>《Java编程思想》</h3> <p>作者：Bruce Eckel</p> <p>出版日期：2006年</p> <p>出版商：机械工业出版社</p> <p>ISBN码：9787115266102</p> <button type="button">添加到购物车</button> </li> <li> <img src="book3.jpg" alt="book3"> <h3>《Python编程从入门到实践》</h3> <p>作者：Eric Matthes</p> <p>出版日期：2016年</p> <p>出版商：人民邮电出版社</p> <p>ISBN码：9787115266102</p> <button type="button">添加到购物车</button> </li> </ul> </section>怎么让他同行显示

可以在 CSS 文件中为 `li` 元素设置 `display: inline-block;` 属性，这样可以让每个列表项同行显示。具体的 CSS 代码如下：

li {
  display: inline-block;
  vertical-align: top;
  margin-right: 20px;
  margin-bottom: 20px;
}

这里还为 `li` 元素设置了 `vertical-align: top;` 属性，这样可以让每个列表项的顶部对齐，使得整个列表看起来更加整齐美观。同时，为了让每个列表项之间有一定的间隔，还设置了 `margin-right` 和 `margin-bottom` 属性。