Интерфейс <Div> - PullRequest
Новая
       30

Интерфейс <Div>

2 голосов
/ 20 января 2010

Это мой код: 

<div id="divCategoryMenu" name="divCategoryMenu" style="background-color:#BCD2E6;">
  <ul id="ulCategoryMenu" name="ulCategoryMenu">

  </ul>
</div>

Список динамически заполняется. Но есть проблема:

Когда список заполняется внутри этого элемента Div, элементы выравниваются по центру по умолчанию, когда я не использовал какое-либо свойство align в приведенном выше коде, а также в коде, который я использую для его динамического заполнения. Как выровнять, чтобы элементы выглядели и выглядели так:

альтернативный текст http://www.freeimagehosting.net/uploads/b0f0daf6a2.jpg

В настоящее время он отображается в грязной форме, например:

альтернативный текст http://www.freeimagehosting.net/uploads/901540953d.jpg

**** Отредактировано ****

В моем случае, предметы на самом деле являются ярлыками, а не

. Во-вторых, какой CSS включить, чтобы оно выглядело как первое изображение.

**** Отредактировано далее ****

Код CSS для жестко запрограммированного HTML первого изображения выглядит следующим образом: 

<style type="text/css">

.urbangreymenu{
width: 200px; /*width of menu*/
}

.urbangreymenu .headerbar{
font: bold 12px Verdana;
color: white;
background:#006699 url(media/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E4F0F5;
display: block;
padding: 5px 0;
line-height: 12px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}


.style14 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style15 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #006699; font-size: 11px;}
</style>

Ответы [ 6 ]

1 голос
/ 20 января 2010

Как говорит RegDwight, речь идет о полях / отступах, а не выравнивании. Вы должны добавить следующие элементы стиля к вашему элементу UL, а также к фактическим элементам LI вашего списка.
Обновление: На самом деле нужно было сделать немного больше, чтобы получить пробелы между элементами списка. Смотрите код ниже.

Поскольку элементы LI генерируются и отсутствуют в вашем исходном HTML-коде, вы должны определить их стили в CSS как дочерние элементы вашего элемента UL.

Обновление : мне пришлось немного отредактировать код, чтобы он выглядел точно так же, как в вашем примере. Я вставил полностью новый HTML и CSS, теперь все должно быть в порядке. 

<html><head>
<style type="text/css">
.urbanbluemenu{
    width: 200px; /*width of menu*/
}

ul#ulCategoryMenu {
    background-color: white;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul#ulCategoryMenu li {
    background-color: #BCD2E6;
    margin: 2px 0 2px 0;
    padding: 0 0 0 10px;
}

</style>
</head>
<body>

<div class="urbanbluemenu" id="divCategoryMenu" name="divCategoryMenu">
  <ul id="ulCategoryMenu" name="ulCategoryMenu">
     <li><label>John</label></li>
     <li><label>Bill</label></li>
  </ul>
</div>

</body>
</html>
1 голос
/ 20 января 2010

Рекомендуется назначать отступы и для списков и элементов списка.Причина этого двоякая: 1, есть настройки по умолчанию для полей и отступов, которые обычно нежелательны для навигационных списков.2, Firefox и IE по-разному обрабатывают интервалы, т. Е. Firefox с использованием заполнения, маржина IE (или наоборот, не запоминает), и поэтому они оба должны быть переопределены, чтобы конечный продукт выглядел одинаково в обоих браузерах,

Кроме того, содержимое ol или ul должно быть li.Если у вас есть другие элементы, они должны быть заключены в элемент li.

1 голос
/ 20 января 2010

Попробуйте и посмотрите, работает ли он для вас: 

<div id="divCategoryMenu" name="divCategoryMenu" style="background-color:#BCD2E6;">
  <ul id="ulCategoryMenu" name="ulCategoryMenu" style="list-style:none;padding-left:-2px;margin-left-2px;">
    <li>Zilla Parishad</li>
    <li>Nagar Parishad</li>
    <li>Taluka Panchayat</li>
    <li>Gram Panchayat</li>
  </ul>
</div>

Если ваши элементы <li> являются элементами <label>, убедитесь, что они правильно упакованы в теги <li>.

Редактировать: конечно, как только вы правильно разработали стиль, вы должны переместить стили в таблицу стилей.

Приведенный выше код должен дать вам список без маркеров и слегка потянуть список влево.

1 голос
/ 20 января 2010

Установите поля в 0, немного отступа влево и высоту строки (возможно, 20 пикселей) для ваших элементов li. По умолчанию у li есть margin-left / padding-left (в зависимости от навигатора).

(Высота строки, если li более отделены друг от друга. Также могут работать верхний и нижний отступы.)

1 голос
/ 20 января 2010

На скриншоте я бы сказал, что элементы не выровнены по центру, а смещены влево.

Попробуйте уменьшить margin-left / padding-left для вашего #ulCategoryMenu. В качестве быстрого примера попробуйте: 

<ul id="ulCategoryMenu" name="ulCategoryMenu" style="margin-left:0;padding-left:0">

Возможно, вам также придется уменьшить левый отступ для ваших li s, в зависимости от того, какие правила CSS были ранее применены к ним.

См. Также Листаматик для дальнейшего вдохновения.

0 голосов
/ 20 января 2010

Вы проверили фактический сгенерированный HTML?

Тогда CSS применяется к нему?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...