Есть ли способ создать саморасширяющийся слой с ограничением максимальной ширины, содержащий выровненный по левому краю текст - PullRequest
Новая
       2

Есть ли способ создать саморасширяющийся слой с ограничением максимальной ширины, содержащий выровненный по левому краю текст

1 голос
/ 20 декабря 2011

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

  • Я хочу, чтобы зеленое поле \ element (ul) было сосредоточено в слое шириной 323px / 200px или Auto high (.Address) как по горизонтали, так и по вертикали.
  • Я установил горизонтальное центрирование <ul>, установив fixed width + margin:0px auto, но адреса различаются по длине, и я не хочу просто иметь поле фиксированного размера, где один более длинный адрес будет отображаться по центру (Ship To \ BillTo) заголовок и другой, более короткий, будут выглядеть неуместно, поскольку текст выровнен по левому краю.

  • Я хочу видеть текст в растяжке <li> до зеленого поля <ul> до значения максимальной ширины (например, 280 пикселей) и зеленого поля независимо от его размера.оставаться в центре по горизонтали и вертикали в слое .Address и, следовательно, под заголовками Ship To\Bill To.

  • Основная причина этого заключается в том, что более короткие адреса будут выглядеть смещенными влево в элементе фиксированной ширины ul, и если я уменьшу ширину, будет получен разрыв строки для более длинного адреса, распределяя имя и фамилию и / или адрес по двум строкам.Использование выровненного по центру текста в элементе ul - Конечно, эта проблема решается, но мне нужен выровненный по левому краю текст.

1 Ответ

2 голосов
/ 20 декабря 2011

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: демонстрация jsBin с jQ

...