php - 如何纠正 PHP/CSS 代码中的视觉对齐问题？

Question

虽然我有相当多的桌面/移动编码经验，但在涉及网络相关语言时我是一个 n00b，因此我需要一些帮助.. 我有这个 OpenCart 安装，我在其中应用了一个主题，其中有一些显示给定产品的选项时出现视觉错误。

例子：

我想做这样的编辑：

或者至少是这样的：

现在我已经确定了正在读取选项数据并填充 UI 控件的 PHP 模板代码，并且我想我还确定了正在应用主题的 CSS 样式表。我只需要知道我需要做哪些改变以及在哪里做。

我认为相关的 PHP 模板代码是这样的（完整文件：http: //pastebin.com/zG0cXQX2）：

<?php if ($options) { ?>
      <div class="options">
        <h2><?php echo $text_option; ?></h2>

        <?php foreach ($options as $option) { ?>
        <?php if ($option['type'] == 'select') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">

          <b><?php echo $option['name']; ?>:</b>
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?><br />
          <select name="option[<?php echo $option['product_option_id']; ?>]">
            <option value=""><?php echo $text_select; ?></option>
            <?php foreach ($option['option_value'] as $option_value) { ?>
            <option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
            <?php if ($option_value['price']) { ?>
            (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
            <?php } ?>
            </option>
            <?php } ?>
          </select>
        </div>

        <?php } ?>
        <?php if ($option['type'] == 'radio') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option boss_radio">

          <b><?php echo $option['name']; ?>:</b>
           <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <br />
          <?php foreach ($option['option_value'] as $option_value) { ?>
          <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
          <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
            <?php if ($option_value['price']) { ?>
            (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
            <?php } ?>
          </label>
          <br />
          <?php } ?>
        </div>

        <?php } ?>
        <?php if ($option['type'] == 'checkbox') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option boss_checkbox">

          <b><?php echo $option['name']; ?>:</b>
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <br />
          <?php foreach ($option['option_value'] as $option_value) { ?>
          <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
          <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
            <?php if ($option_value['price']) { ?>
            (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
            <?php } ?>
          </label>
          <br />
          <?php } ?>
        </div>

        <?php } ?>
        <?php if ($option['type'] == 'image') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">

          <b><?php echo $option['name']; ?>:</b>
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <br />
          <table class="option-image">
            <?php foreach ($option['option_value'] as $option_value) { ?>
            <tr>
              <td style="width: 1px;"><input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /></td>
              <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /></label></td>
              <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
                  <?php if ($option_value['price']) { ?>
                  (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                  <?php } ?>
                </label></td>
            </tr>
            <?php } ?>
          </table>
        </div>

        <?php } ?>
        <?php if ($option['type'] == 'text') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">

          <b><?php echo $option['name']; ?>:</b>
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <br />
          <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" />
        </div>

        <?php } ?>
        <?php if ($option['type'] == 'textarea') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">

          <b><?php echo $option['name']; ?>:</b>
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?><br />
          <textarea name="option[<?php echo $option['product_option_id']; ?>]" cols="40" rows="5"><?php echo $option['option_value']; ?></textarea>
        </div>

        <?php } ?>
        <?php if ($option['type'] == 'file') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">

          <b><?php echo $option['name']; ?>:</b>
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <br />
          <span class="boss_button button_black">
          <input type="button" value="<?php echo $button_upload; ?>" id="button-option-<?php echo $option['product_option_id']; ?>" class="button"></span>
          <input type="hidden" name="option[<?php echo $option['product_option_id']; ?>]" value="" />
        </div>

        <?php } ?>
        <?php if ($option['type'] == 'date') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">

          <b><?php echo $option['name']; ?>:</b>
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <br />
          <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" class="date" />
        </div>

        <?php } ?>
        <?php if ($option['type'] == 'datetime') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">

          <b><?php echo $option['name']; ?>:</b>
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <br />
          <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" class="datetime" />
        </div>

        <?php } ?>
        <?php if ($option['type'] == 'time') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">

          <b><?php echo $option['name']; ?>:</b>
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <br />
          <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" class="time" />
        </div>
        <br />
        <?php } ?>
        <?php } ?>
      </div>      
      <?php } ?>

我看到的 CSS 样式是这样的（此处的完整文件：http: //pastebin.com/C4ZGiyqB）：

.product-info .options {
    border-bottom: 1px solid #ccc;
    padding: 0 0 22px 0;
    margin-bottom: 16px;
    color: #5d5d5d;
}
.product-info .options select { width:246px; margin-top:5px}
.product-info .options input[type="text"] { width:236px;margin-top:5px}
.product-info .options textarea { width:406px;margin-top:5px }
.product-info .options h2 {
    text-transform:uppercase; font-size:11px;margin-bottom:0;
}
.product-info .options b {  
    color:#5d5d5d;
    padding-bottom:5px
}
.product-info .option { margin-top:13px}
.product-info .option  .boss_button.button_black { margin-top:10px; display: inline-block;}
.product-info .option.boss_radio { float:left; width:39%}
.product-info .option.boss_checkbox{ float:left; width:61%} 

.product-info .option-image {
    margin-top: 3px;
    margin-bottom: 10px;
}
.product-info .option-image label {
    display: block;
    width: 100%;
    height: 100%;

}
.product-info .option-image img {
    margin-right: 5px;
    border: 1px solid #CCCCCC;
    cursor: pointer;

如果有人能指出我正确的方向，我将不胜感激。

编辑：

可以看到此格式问题的确切页面是：

http://blu-rays.pk/opencart_test/index.php?route=product/product&product_id=40

Answer 1

我建议在使用 Firefox 修改 CSS 时使用 Firebug 的“Inspect Element with Firebug”选项。它是查找、纠正和试验 CSS 的非常有用的工具。它是一个火狐插件。

https://getfirebug.com/

我知道这并没有给你这个问题的确切解决方案，但希望它提供了钓鱼竿而不是给你鱼。
也许外面的其他人也有时间给你鱼。

我查看了您的示例页面，看到边框穿过显示“收音机”的文本标签。为了纠正这个问题，我修改了以下 CSS 以删除浮动：

.product-info .option.boss_radio {
    float: left;
    width: 39%;
}

将其设置为

.product-info .option.boss_radio {
    width: 39%;
}

导致边界停止重叠。

有时对齐可能很棘手，解决一个问题会导致另一个问题。我希望这会有所帮助，并让您到达您需要的地方。