English 中文(简体)
我如何在清单要素内下行文
原标题:How do I indent text on the next line within a list element
  • 时间:2012-04-24 17:15:05
  •  标签:
  • css

我有一个没有顺序的清单:

<ul class="list_arrow2">
    <li>
        <span style="display: inline-block; width: 150px; font-weight: bold;">
            Signup Options </span>&ndash; &nbsp; Describe your signup options 
            that an applicant can choose from. List the signup option type, 
            description, and price. For example, the two signup options might be 
            Customer or Distributor; each option would carry a different description 
            of cost and details.
    </li>
    <li>
        <span style="display: inline-block; width: 150px; font-weight: bold;">
            Order Options </span>&ndash; &nbsp; Indicate any additional purchase 
            options that an applicant may have. This may be in the form of a single 
            item or package item order. For example, you might want to give the 
            applicant a choice to purchase a "starter kit" that includes various 
            products that you sell. Be sure to list the details of these items, 
            including a description and price.
    </li>
    <li>
        <span style="display: inline-block; width: 150px; font-weight: bold;">
            Autoship Options </span>&ndash; &nbsp; This section can be exclusive 
            of the Order Options section or you can include both. The Autoship 
            section is just like the Order Options section except that the applicant 
            is agreeing to receive the order on an monthly, recurring basis. Be 
            sure to include descriptions, pricing, etc.
    </li>
    <li>
        <span style="display: inline-block; width: 150px; font-weight: bold;">
            Payment Options </span>&ndash; &nbsp; List the types of credit cards 
            you accept (Visa, M/C, AMEX, Diners). Also, if you intend on taking 
            personal checks online, or ACH, be sure to add this to your details. 
            If you plan on taking online checks, or ACH, please contact your Account 
            Manager for more details on getting this set up.
    </li>
    <li>
        <span style="display: inline-block; width: 150px; font-weight: bold;">
            Terms and Conditions</span>&ndash; &nbsp; Please provide the full text 
            of your terms and conditions and/or Distributor Agreement. This will 
            be displayed for the applicant to agree to before proceeding with 
            their registration.
    </li>
    <li>
        <span style="display: inline-block; width: 150px; font-weight: bold;">
            Confirmation Message </span>&ndash; &nbsp; Please provide us with 
            the text that is displayed once the applicant successfully signs up. 
            This text is also emailed to the new applicant.
    </li>
    <li>
        <span style="display: inline-block; width: 150px; font-weight: bold;">
            Welcome Message </span>&ndash; &nbsp; Please provide us with the text 
            that is displayed as an introduction to the applicant.
    </li>
</ul>

现在,如果案文流到下行,它将与左边(按顺序选择的权利)完全一致。 将清单标题(顺序选择)与左边相统一的最佳方式是什么,如果把顺序选择移到下一个线,则说明这种选择的案文是否与自己一致?

Order Options - This is some text
I am ugly over flowed text

Order Options - This is some text
                I am pretty overflowed text!

Edited:

这里是我的奇迹。

ul.list_arrow, ul.list_arrow2 {
    margin: 0px 0 15px 15px!important;
}
ul.list_arrow li {
    padding: 2px 2px 2px 0px;
    list-style-image: url(../images/icon/arrow_a.gif);
}
ul.list_arrow2 li {
    padding: 2px 2px 2px 0px;
    list-style-image:url(../images/icon/arrow.png)
}

dl.list_arrow, dl.list_arrow2 {
    margin: 0px 0 15px 15px!important;
}
dl.list_arrow dt {
    padding: 2px 2px 2px 0px;
    list-style-image: url(../images/icon/arrow_a.gif);
}
dl.list_arrow2 dt {
    padding: 2px 2px 2px 0px;
    list-style-image:url(../images/icon/arrow.png)
}
最佳回答

定义清单将更好地满足你们的需要。 见<>jsFiddle example

传真

<dl class="list_arrow2">
    <dt>Signup Options </dt>
    <dd>–&nbsp;&nbsp; Describe your signup options that an applicant can choose 
    from. List the signup option type, description, and price. For example, the 
    two signup options might be Customer or Distributor; each option would carry 
    a different description of cost and details</dd>
    <dt>Order Options </dt>
    <dd>–&nbsp;&nbsp; Indicate any additional purchase options that an applicant 
    may have. This may be in the form of a single item or package item order. For 
    example, you might want to give the applicant a choice to purchase a &quot;starter 
    kit&quot; that includes various products that you sell. Be sure to list the details 
    of these items, including a description and price. </dd>
    <dt>Autoship Options </dt>
    <dd>–&nbsp;&nbsp; This section can be exclusive of the Order Options section 
    or you can include both. The Autoship section is just like the Order Options 
    section except that the applicant is agreeing to receive the order on an monthly, 
    recurring basis. Be sure to include descriptions, pricing, etc. </dd>
    <dt>Payment Options </dt>
    <dd>–&nbsp;&nbsp; List the types of credit cards you accept (Visa, M/C, AMEX, 
    Diners). Also, if you intend on taking personal checks online, or ACH, be sure 
    to add this to your details. If you plan on taking online checks, or ACH, please 
    contact your Account Manager for more details on getting this set up. </dd>
    <dt>Terms and Conditions</dt>
    <dd>–&nbsp;&nbsp; Please provide the full text of your terms and conditions 
    and/or Distributor Agreement. This will be displayed for the applicant to agree 
    to before proceeding with their registration. </dd>
    <dt>Confirmation Message </dt>
    <dd>–&nbsp;&nbsp; Please provide us with the text that is displayed once the 
    applicant successfully signs up. This text is also emailed to the new applicant.
    </dd>
    <dt>Welcome Message </dt>
    <dd>–&nbsp;&nbsp; Please provide us with the text that is displayed as an introduction 
    to the applicant. </dd>
</dl>

问题回答




相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

jquery ui dialog opens only once

I have a button that opens a dialog when clicked. The dialog displays a div that was hidden After I close the dialog by clicking the X icon, the dialog can t be opened again.

Drop down background url in Safari Issue

selectBox.selectCSS { background: url(/Images/replacementSelectBackground.png) top left no-repeat height:auto; } I have an issue in Safari only where the image is not rendering on top ...

CSS specific for Safari

How do you target specifically safari in css with styles?

Aligning textarea in a form

Ive used the following css code to align my form elements: form { position:relative; } form input { position:absolute; left:11em; } However, the textarea element is not aligned correctly with the ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

CSS problem with page footer

I have defined my page footer in the css file as: #footer { position: absolute; height: 50px; text-align: center; background: #66CCCC; bottom: 0px; left: 0px; width: 100%; height: ...

热门标签