Question

我在HTML中添加换行符时遇到了问题。此外，在Chrome和Opera中，第一个要点是相反的。 Firefox和Internet Explorer正确完成。

以下是代码：

<div class="line"></div>
<div id="product_details" class="block_center">
    <img src="http://blazeaudio.com/images/RecordCleanerPop.png" class="left" alt="Power Record" title="Power Record" style="width:50%" />
    <img src="http://blazeaudio.com/images/RecordCleanerHum.png" class="right" alt="Power Record" title="Power Record" style="width:50%"/>
    <img src="http://blazeaudio.com/images/RecordCleanerHiss.png" class="left" alt="Power Record" title="Power Record" style="width:50%"/>
    <img src="http://blazeaudio.com/images/RecordCleanerNoiseGate.png" class="right" alt="Power Record" title="Power Record" style="width:50%"/>
</div>
<br>
<br>
<ul class="productsBullets">
    <li>Removes Pops and Clicks</li>
    <li>Eliminates Hum</li>
</ul>

这是网站：

enter link description here

Answer 1

看来你的ul需要清除浮子。在layout.css第90行中尝试这个。

ul.productsBullets {
    clear: both;
    font-size: 1.4em;
}

Answer 2

如你所提到的那样，你的四个图像只是相互显示，所以在他们自己的div中围绕图像然后在那之后添加几个换行符然后在图像div上的ul或us css给它一些间距EG ：

   <div id="product_details" class="block_center">
       <!-- image wrapper -->
       <div class="image-wrapper" style="margin: 15px 0;">
        <img src="http://blazeaudio.com/images/RecordCleanerPop.png" class="left" alt="Power Record" title="Power Record" style="width:50%">
        <img src="http://blazeaudio.com/images/RecordCleanerHum.png" class="right" alt="Power Record" title="Power Record" style="width:50%">
        <img src="http://blazeaudio.com/images/RecordCleanerHiss.png" class="left" alt="Power Record" title="Power Record" style="width:50%">
        <img src="http://blazeaudio.com/images/RecordCleanerNoiseGate.png" class="right" alt="Power Record" title="Power Record" style="width:50%">
       </div>
       <!-- end of image wrapper -->

        <ul class="productsBullets">
            <li>Removes Pops and Clicks</li>
            <li>Eliminates Hum</li>
            <li>Reduces Hiss</li>
            <li>Noise Gate Removal</li>
            <li>You must have <strong>RipEditBurn Plus</strong>, <strong>RipEditBurn</strong>, or <strong>Wave Creator</strong> installed on your computer</li>
        </ul>
    </div>

我添加了内联样式=“margin：15px 0;”例如，但你可以将它添加到一个类。

还会在内容结尾处的<li></li>标记中丢失额外的空格，查看来源以查看我的意思。

希望这有点帮助

这是一个可能有用的工作示例：

.block_center {
  margin: 0 auto;
  padding: 0;
  width: 75%;
  max-width: 770px;
  height: auto;
  box-sizing: border-box;
}

.image-wrapper {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

.image-wrapper img {
  margin: 0;
  padding: 5px;
  width: 49%;
  box-sizing: border-box;
}

<div id="product_details" class="block_center">
       <!-- image wrapper -->
       <div class="image-wrapper" >
        <img src="http://blazeaudio.com/images/RecordCleanerPop.png" alt="Power Record" title="Power Record">
        <img src="http://blazeaudio.com/images/RecordCleanerHum.png"  alt="Power Record" title="Power Record" >
        <img src="http://blazeaudio.com/images/RecordCleanerHiss.png" alt="Power Record" title="Power Record">
        <img src="http://blazeaudio.com/images/RecordCleanerNoiseGate.png" alt="Power Record" title="Power Record">
       </div>
       <!-- end of image wrapper -->

        <ul class="productsBullets">
            <li>Removes Pops and Clicks</li>
            <li>Eliminates Hum</li>
            <li>Reduces Hiss</li>
            <li>Noise Gate Removal</li>
            <li>You must have <strong>RipEditBurn Plus</strong>, <strong>RipEditBurn</strong>, or <strong>Wave Creator</strong> installed on your computer</li>
        </ul>
    </div>

Answer 3

试试这个

.productsBullets {
    float: left;
}

HTML换行符

3 个答案: