HTML Line Breaks

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>

这是网站：

在此处输入链接说明

Answer 1

如前所述，您的四个图像和 ul 只是相互显示，因此将图像包围在它们自己的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 2

看来你的ul需要清除浮点数。在您的布局中尝试此操作.css第 90 行。

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

Answer 3

试试这个

.productsBullets {
    float: left;
}