Question

我有一个图像和文本（无序列表），以及图像旁边的按钮，但是我无法使文本和按钮更接近图像。我在课堂上尝试使用inline-block并使用固定位置/绝对位置，但是我发现使用绝对位置似乎不是那么有效。 margin-left也不起作用。是否有一个简单的CSS技巧来使with列表向左对齐？或接近图像？下面是我的代码：

li {
    text-align: left;
    padding: 3px;
}

li.title {
    list-style-type: none;
    font-size: 15px;
}

li.author {
    list-style-type: none;
    font-size: 12px;
}

li.isbn {
    list-style-type: none;
    font-size: 12px;
}

li.price {
    list-style-type: none;
    font-size: 12px;
    font-weight: bold;
}

.flexItem {
    display:flex;
    align-items: center;
    margin-left: 10px;
    flex: 1;
}

.flexItem img{
    flex-grow:0;
    flex-shrink:0;
}

.button {
    color: white;
    padding: 2px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    transition-duration: 0.4s;
    cursor: pointer;
}

.buttonCart {
    width: 100px;
    background-color: white;
    color: black;
    border: 2px solid #dd1d5e;
}

.buttonCart:hover {
    background-color: #dd1d5e;
    color: white;
}

.buttonOnline {
    width: 100px;
    background-color: white;
    color: black;
    border: 2px solid #dd1d5e;
}

.buttonOnline:hover {
    background-color: #dd1d5e;
    color: white;
}

<div class="flexItem">
    <img src="images/books/holiday/royal_ester.png" alt="Royal Easter" class="image">
        <div class="text">
            <ul>
                <li class="title"> The Royal Easter </li>
                <li class="author"> Marshella Goodsworth </li>
                <li class="isbn"> ISBN123123412 </li>
                <li class="price"> $14.99 </li>
            </ul>
            <button class="button buttonCart">Add to Cart</button>
        </div>
</div>

Answer 1

删除<ul>元素上的填充：

li {
  text-align: left;
  padding: 3px;
}

li.title {
  list-style-type: none;
  font-size: 15px;
}

li.author {
  list-style-type: none;
  font-size: 12px;
}

li.isbn {
  list-style-type: none;
  font-size: 12px;
}

li.price {
  list-style-type: none;
  font-size: 12px;
  font-weight: bold;
}

.flexItem {
  display: flex;
  align-items: center;
  margin-left: 10px;
  flex: 1;
}

.flexItem img {
  flex-grow: 0;
  flex-shrink: 0;
}

.button {
  color: white;
  padding: 2px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.buttonCart {
  width: 100px;
  background-color: white;
  color: black;
  border: 2px solid #dd1d5e;
}

.buttonCart:hover {
  background-color: #dd1d5e;
  color: white;
}

.buttonOnline {
  width: 100px;
  background-color: white;
  color: black;
  border: 2px solid #dd1d5e;
}

.buttonOnline:hover {
  background-color: #dd1d5e;
  color: white;
}

ul {
  padding: 0;
}

<div class="flexItem">
  <img src="https://via.placeholder.com/200x200.png

C/O https://placeholder.com/" alt="Royal Easter" class="image">
  <div class="text">
    <ul>
      <li class="title"> The Royal Easter </li>
      <li class="author"> Marshella Goodsworth </li>
      <li class="isbn"> ISBN123123412 </li>
      <li class="price"> $14.99 </li>
    </ul>
    <button class="button buttonCart">Add to Cart</button>
  </div>
</div>

如何消除图像和<div>内容之间的间隙？

1 个答案: