我有一个无序列表：
<ul class="list_arrow2">
<li>
<span style="display: inline-block; width: 150px; font-weight: bold;">
Signup Options </span>– 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>– 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>– 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>– 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>– 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>– 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>– 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!
编辑：
这是我的css
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)
}
答案 0 :(得分：2)
您可以缩进范围，如此（fiddle here）：
li {
padding-left:150px;
}
li span {
margin-left: -150px;
}
更好的方法是设置悬挂缩进（fiddle）：
li {
margin-left:150px;
text-indent:-150px;
}
答案 1 :(得分：1)
定义列表更适合您的需求。请参阅 jsFiddle example 。
HTML
<dl class="list_arrow2">
<dt>Signup Options </dt>
<dd>– 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>– 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. </dd>
<dt>Autoship Options </dt>
<dd>– 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>– 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>– 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>– 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>– Please provide us with the text that is displayed as an introduction
to the applicant. </dd>
</dl>