HTML换行

Question

我在HTML中放行中断有困难。此外，在Chrome和Opera中，第一个重点是相反的。Firefox和Internet正确地做了这件事。

下面是代码：

<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上添加几行中断，然后在图像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>

我已经添加了内联style=“页边距:15 to 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需要清除浮标。在您的layout.css第90行中试试这个。

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

Answer 3

尝尝这个

.productsBullets {
    float: left;
}