如何糾正PHP/CSS代碼中的視覺對齊問題？

儘管我擁有相當數量的桌面/移動編碼體驗，但當涉及到網絡相關語言時，我是一個n00b，因此我需要一些幫助。我有這個OpenCart安裝，其中應用了一個主題，它在顯示給定產品的選項時會出現一些視覺錯誤。如何糾正PHP/CSS代碼中的視覺對齊問題？

例子：

enter image description here

我願爲此做出這樣需要編輯：

enter image description here

，或者至少是這樣的：

enter image description here

現在我已經識別出正在閱讀選項數據並正在填充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

來源

2013-05-07 Ahmad

而不是php代碼，你可以發佈實際生成的HTML？此外，如果您可以在http://www.jsfiddle.net上重現您的問題，則幫助會更快。 – Arbel 2013-05-07 00:16:53

或者你能分享我們的鏈接嗎？我可以檢查問題並提供解決方案（至少我相信是這樣）... – shadyyx 2013-05-07 08:56:52

@Arbel，你可以在上面的鏈接頁面上看到生成的HTML。不幸的是，我從來沒有使用jsfiddle.net來處理這樣的大問題，所以我不確定在這種情況下這有什麼用處:) – Ahmad 2013-05-08 12:58:58

我會建議使用Firebug而在「檢查元素與螢火蟲」選項使用Firefox來修改CSS。這是一個非常有用的工具，用於查找，糾正和試驗CSS。它是一個Firefox插件。

https://getfirebug.com/

我知道這並不能給你這個問題的確切解決方案，但希望它提供的釣魚杆而不是給你的魚。
也許其他人也有一些時間也給你魚。

我看了一下你的示例頁面，看到邊框通過讀取「Radio」的文本標籤。爲了糾正這一問題，我修改了以下CSS去除浮動：

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

設置它

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

造成邊境停止重疊。

有時候對齊可能會非常棘手，修復一個問題會導致另一個問題。我希望這會有所幫助，並讓你到達需要的地方。

來源

2013-05-07 00:14:39 RacerNerd

我試圖使用它，因爲我仍然無法弄清哪些CSS需要調整......你可能看看我上面提到的URL嗎？ – Ahmad 2013-05-09 18:49:45

我看了一下，並在我的答案中添加了一個示例，看看是否讓你感覺到某個地方。 – RacerNerd 2013-05-09 20:24:56

如何糾正PHP/CSS代碼中的視覺對齊問題？

回答

相關問題