有没有办法创建一个具有最大宽度限制的自扩展图层，其中包含左对齐文本

Question

JSFIDDLE

HTML:

<div class="SummaryTable">

    <div class="AddressContainer">

        <div class="Address">
          <b>Ship To: </b>
            <ul>
                <li>John Smith</li>
                <li>45 Holland drv.</li>
            </ul>
        </div>

            <div class="Address">
             <b>Bill To: </b>
                <ul>
                    <li>John Smith</li>
                    <li>P.O Box 456</li>
                </ul>
            </div>
    </div>
</div>

CSS:

.SummaryTable
{
width: 650px;   
text-align:center;
}


.SummaryTable .AddressContainer
{
width:650px;
}

.SummaryTable .Address
{
width:323px;
background-color:Yellow;
float:left;
border: 1px solid black;
height:200px;
}

.Address ul
{
width:130px;
min-width:130px;
max-width: 280px;
margin-left:auto;
margin-right:auto;
background-color:Green;
text-align:left;
padding:0px;
}

.Address li
{
list-style-type: none;
}

JSFIDDLE

• 我想将绿色框\元素(ul)保持在323px宽/200px或自动高(.Address)层的水平和中心位置垂直。
• 我通过设置 fixed width + margin:0px auto 实现了
  的水平居中，但地址的长度各不相同，我不只想要一些固定大小的框其中一个较长的地址将显示在（收货地址\收单地址）标题下方的中心，而另一个较短的地址将看起来不合适，因为文本左对齐。

• 我想看到

• 中的文本拉伸到
  绿色框，直到最大宽度设置（例如 280px），并且绿色框，无论其大小如何，都将在 .Address 层中保持水平和垂直居中，并因此位于 Ship To\Bill To 标题下。

• 这样做的主要原因是，较短的地址看起来会在固定宽度 ul 元素中向左偏移，如果我使宽度小于换行符，则会出现较长的地址，从而扩展第一个以及姓氏和/或地址，共两行。在 ul 元素中使用居中对齐的文本 -当然解决了这个问题，但我需要左对齐文本。

Answer 1

DEMO jsBin

如果我很好地理解你的问题，

这里是修改后的 CSS：

.SummaryTable{
  width: 650px;   
  text-align:center;
}    
.AddressContainer{
  width:650px;
}   
.Address{
  width:323px;
  background-color:white;
  float:left;
  border: 1px solid black;
  height:200px;
}
.address b{
    display:block;           /*should do the trick*/
}
.Address ul{
  display:inline-block;     /*should do the trick*/
  background-color:orange; 
  text-align:left;
  padding:0px; 
}
.Address li{
    list-style-type: none;
}

我删除了一些 margin-reft/right:auto、widths、min-width、max width 并格式化了您的 .summaryTable css“外观”。稍微玩一下 display 属性就可以了。

这是使用 jQuery 的演示： 使用 jQ 演示 jsBin