0

这是我已经拥有的代码的样子,但我想将其设置为精确的宽度,以便一切看起来都很整洁:

我对 HTML 不是很好,希望有人能告诉我把什么放在哪里。这是我的代码:

<p align="center">
  <span style="color:#000080;"><span style="font-size:48px;"><span style="font-family:times new roman,times,serif;">Product Information</span></span>
  </span>
</p>
<div>
  <h2>
    <span style="color:#000080;"><big><u><span style="background-color:#66ccff;">Description &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></u>
    </big>
    </span>
  </h2>
</div>
<ul>
  <li>
    <span style="font-size:18px;">This is a 2016 Peyton Manning #18 Jersey.</span></li>
  <li>
    <span style="font-size:18px;">Team: Denver Broncos</span></li>
  <li>
    <span style="font-size:18px;">Player: Peyton Manning</span></li>
  <li>
    <span style="font-size:18px;">Color: Orange</span></li>
  <li>
    <span style="font-size:18px;">Brand: Nike</span></li>
  <li>
    <span style="font-size:18px;">This is a used item that has <u>NO</u> defects. No rips, tears, or stains.</span></li>
</ul>
<div>
  <div>
    <h2>
      <span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Size &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></u>
      </big>
      </span>
    </h2>
  </div>
  <ul>
    <li>
      This is a Large/44 Jersey. These are the measurements:</li>
  </ul>
</div>
<p align="center">
  <img height="230" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image001.jpg" width="219"><img height="225" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg" width="225"></p>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:276px;" width="276">
  <tbody>
    <tr>
      <td colspan="4" nowrap="nowrap" style="width:276px;height:20px;">
        <p align="center">
          Measurement Chart</p>
      </td>
    </tr>
    <tr>
      <td nowrap="nowrap" style="width:63px;height:20px;">
        <p>
          <strong>Country</strong></p>
      </td>
      <td nowrap="nowrap" style="width:75px;height:20px;">
        <p>
          Length</p>
      </td>
      <td nowrap="nowrap" style="width:66px;height:20px;">
        <p>
          Width</p>
      </td>
      <td nowrap="nowrap" style="width:72px;height:20px;">
        <p>
          Sleeves</p>
      </td>
    </tr>
    <tr>
      <td nowrap="nowrap" style="width:63px;height:20px;">
        <p>
          <strong>U.S.</strong></p>
      </td>
      <td nowrap="nowrap" style="width:75px;height:20px;">
        <p>
          &nbsp;</p>
      </td>
      <td nowrap="nowrap" style="width:66px;height:20px;">
        <p>
          &nbsp;</p>
      </td>
      <td nowrap="nowrap" style="width:72px;height:20px;">
        <p>
          &nbsp;</p>
      </td>
    </tr>
    <tr>
      <td nowrap="nowrap" style="width:63px;height:20px;">
        <p>
          <strong>Europe</strong></p>
      </td>
      <td nowrap="nowrap" style="width:75px;height:20px;">
        <p>
          &nbsp;</p>
      </td>
      <td nowrap="nowrap" style="width:66px;height:20px;">
        <p>
          &nbsp;</p>
      </td>
      <td nowrap="nowrap" style="width:72px;height:20px;">
        <p>
          &nbsp;</p>
      </td>
    </tr>
  </tbody>
</table>
<div style="clear:both;">
  &nbsp;</div>
<p>
  &nbsp;</p>
<p align="center">
  <span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:18px;">If you want further details on the sizing, please feel free to message us!</span></span>
</p>
<div>
  <div>
    <h2>
      <span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Shipping &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></u>
      </big>
      </span>
    </h2>
  </div>
  <ul>
  </ul>
  <p>
    <span style="font-size:18px;">This item is shipped using USPS Priority Mail. It is shipped out of St. Paul, MN 55014.</span></p>
</div>
<div>
  <br>
  <span style="font-size:18px;">We try to ship this package within 24 hour of the time you pay for the item.<br>
We ship Internationally.</span></div>
<p>
  <span style="font-size:18px;"><img src="http://thebuttonpost.com/wp-content/uploads/2014/07/priority-mail.png" style="margin-left: 12px; margin-right: 12px; float: right; width: 220px; height: 131px;"></span></p>
<div>
  &nbsp;</div>
<p>
  <span style="font-size:18px;"><u>The following is included in this shipment:</u></span></p>
<div>
  <p>
    <span style="font-size:18px;">1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2-4 Day Shipping in the US</span></p>
  <div>
    <p>
      <span style="font-size:18px;">2.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Free Tracking</span></p>
    <p>
      <span style="font-size:18px;">3.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Insurance for your package up to $50.00</span></p>
    <div>
      &nbsp;</div>
    <p>
      <span style="font-size:18px;">Please insure that your address is correct. If you are worried your package could be stolen please contact your Post Office with the tracking number and have them hold it there for you. Unfortunately once the tracking shows the package has been delivered to the address it is your responsibility and refunds cannot be accepted.</span></p>
    <p>
      <span style="font-size:18px;">If your package was damaged by USPS, please contact us ASAP with photos showing the extent of the damage. You will be refunded and we will take care of making an insurance claim with USPS since packaging was our responsibility.</span></p>
    <p>
      &nbsp;</p>
    <div>
      <div>
        <h2>
          <span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Return Policy &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span></u>
          </big>
          </span>
        </h2>
      </div>
      <p>
        <span style="font-size:18px;">We try to make the description of the item you’re buying as detailed as possible to avoid the need for returns. If your item contains a defect that was not listed in the description we will accept a return with photos of the defect. If the item’s defect is clearly not in the photos we posted, or seem to be manufactured, your return will not be accepted.</span></p>
    </div>
    <div>
      <div>
        <h2>
          <span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Payment &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span></u>
          </big>
          </span>
        </h2>
      </div>
      <p>
        <span style="font-size:18px;">We accept PayPal and Credit/Debit cards. After you click “Purchase Item” you are not done checking out! Click on <u>PAY NOW</u>. Your package will not be shipped until you pay for your item, and it will be cancelled if you do not pay within 2 Business Days.</span></p>
    </div>
    <p align="center">
      &nbsp;</p>
    <p align="center">
      &nbsp;</p>
    <p style="text-align: center;">
      <img alt="" src="http://www.bceldercare.ca/images/paypal-verified.png" style="width: 500px; height: 146px;"></p>
    <p align="center">
      &nbsp;</p>
  </div>
</div>
<p>
  &nbsp;</p>

4

2 回答 2

1

我不推荐固定宽度。在移动设备上,您的模板不会显示得很好。我建议你看一个简单的响应式网格 css 布局,比如骨架 - 它会根据浏览器的宽度调整它的大小,在 eBay 中可以正常工作!

于 2016-02-29T14:58:21.693 回答
0

把你的整个页面放在一个容器中怎么样,给那个容器一个你想要的宽度并将它居中。在我的片段中,我给容器的宽度为 50vw(等于当前视口宽度的 50%)

#container{
  width:50vw;
  display:block;
  margin:0 auto;
}
<div id="container">
<p align="center">
<span style="color:#000080;"><span style="font-size:48px;"><span style="font-family:times new roman,times,serif;">Product Information</span></span></span></p>
<div>
<h2>
<span style="color:#000080;"><big><u><span style="background-color:#66ccff;">Description &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></u></big></span></h2>
</div>
<ul>
<li>
<span style="font-size:18px;">This is a 2016 Peyton Manning #18 Jersey.</span></li>
<li>
<span style="font-size:18px;">Team: Denver Broncos</span></li>
<li>
<span style="font-size:18px;">Player: Peyton Manning</span></li>
<li>
<span style="font-size:18px;">Color: Orange</span></li>
<li>
<span style="font-size:18px;">Brand: Nike</span></li>
<li>
<span style="font-size:18px;">This is a used item that has <u>NO</u> defects. No rips, tears, or stains.</span></li>
</ul>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Size &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></u></big></span></h2>
</div>
<ul>
<li>
This is a Large/44 Jersey. These are the measurements:</li>
</ul>
</div>
<p align="center">
<img height="230" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image001.jpg" width="219"><img height="225" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg" width="225"></p>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:276px;" width="276">
<tbody>
<tr>
<td colspan="4" nowrap="nowrap" style="width:276px;height:20px;">
<p align="center">
Measurement Chart</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>Country</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
Length</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
Width</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
Sleeves</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>U.S.</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
&nbsp;</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
&nbsp;</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
&nbsp;</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>Europe</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
&nbsp;</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
&nbsp;</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div style="clear:both;">
&nbsp;</div>
<p>
&nbsp;</p>
<p align="center">
<span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:18px;">If you want further details on the sizing, please feel free to message us!</span></span></p>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Shipping &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></u></big></span></h2>
</div>
<ul>
</ul>
<p>
<span style="font-size:18px;">This item is shipped using USPS Priority Mail. It is shipped out of St. Paul, MN 55014.</span></p>
</div>
<div>
<br>
<span style="font-size:18px;">We try to ship this package within 24 hour of the time you pay for the item.<br>
We ship Internationally.</span></div>
<p>
<span style="font-size:18px;"><img src="http://thebuttonpost.com/wp-content/uploads/2014/07/priority-mail.png" style="margin-left: 12px; margin-right: 12px; float: right; width: 220px; height: 131px;"></span></p>
<div>
&nbsp;</div>
<p>
<span style="font-size:18px;"><u>The following is included in this shipment:</u></span></p>
<div>
<p>
<span style="font-size:18px;">1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2-4 Day Shipping in the US</span></p>
<div>
<p>
<span style="font-size:18px;">2.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Free Tracking</span></p>
<p>
<span style="font-size:18px;">3.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Insurance for your package up to $50.00</span></p>
<div>
&nbsp;</div>
<p>
<span style="font-size:18px;">Please insure that your address is correct. If you are worried your package could be stolen please contact your Post Office with the tracking number and have them hold it there for you. Unfortunately once the tracking shows the package has been delivered to the address it is your responsibility and refunds cannot be accepted.</span></p>
<p>
<span style="font-size:18px;">If your package was damaged by USPS, please contact us ASAP with photos showing the extent of the damage. You will be refunded and we will take care of making an insurance claim with USPS since packaging was our responsibility.</span></p>
<p>
&nbsp;</p>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Return Policy &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span></u></big></span></h2>
</div>
<p>
<span style="font-size:18px;">We try to make the description of the item you’re buying as detailed as possible to avoid the need for returns. If your item contains a defect that was not listed in the description we will accept a return with photos of the defect. If the item’s defect is clearly not in the photos we posted, or seem to be manufactured, your return will not be accepted.</span></p>
</div>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Payment &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span></u></big></span></h2>
</div>
<p>
<span style="font-size:18px;">We accept PayPal and Credit/Debit cards. After you click “Purchase Item” you are not done checking out! Click on <u>PAY NOW</u>. Your package will not be shipped until you pay for your item, and it will be cancelled if you do not pay within 2 Business Days.</span></p>
</div>
<p align="center">
&nbsp;</p>
<p align="center">
&nbsp;</p>
<p style="text-align: center;">
<img alt="" src="http://www.bceldercare.ca/images/paypal-verified.png" style="width: 500px; height: 146px;"></p>
<p align="center">
&nbsp;</p>
</div>
</div>
<p>
&nbsp;</p>
</div>

于 2016-02-29T02:09:18.343 回答