Jump to content
  • 0

Скроллинг и/или растягивание списка


MIT
 Share

Question

Приветствую всех.

Столкнулся с задачей переделки хайлайтера исходников, но не могу побороть одну проблему связанную с CSS.

На выходе получается конструкция такой структуры:

<div class="content">
<dl class="codebox">
<dt>Заголовок</dt>
<dd>
<div class="codebox1">
<ol>
<li>
<pre><span style="color: #235ae6;">Public</span> <span style="color: #235ae6;">Class</span> Form1</pre>
</li>
<li>
<pre> </pre>
</li>
</ol>
</div>
</dd>
</dl>
</div>

CSS:

div.codebox1 {
background-color:#C0CDDE;
font-size:0.9em;
line-height:1.1em;
max-height:250px;
overflow:scroll;
}
div.codebox1 ol {
background-color:#F3F8FF;
margin-bottom:0;

}
div.codebox1 ol li {
padding-left:3px;
border-left: 2px solid #255289;
font-weight: normal;
vertical-align: top;
padding-right:10px;
}

Задача: сделать этот список scrollable`вым, причем что бы было это красиво.

Проблема: Основная проблема в том что список получается слишком узким.

Если список промотан в самое левое положение, то все нормально:

33a4a2a191ed.png

однако стоит его промотать чуть вправо, как появляется неприятный эффект:

279976be7967.png

При этом я как бы понимаю из-за чего это, но вот решения в голову не приходит.

Пробовал в стиль списка (div.codebox1 ol) добавить строку display:inline-block;, однако этот трюк помогает далеко не всегда.

Пробовал сделать скроллбары у самого списка, а не у его обертки, но все равно получается не очень красиво - исчезают цифры элементов списка:

d31c1d4b8adf.png

что тоже не фонтан.

Надеюсь задумка понятна. Помогите, плиз.

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0
может я туплю, но по моему вся проблема вот в этом месте:
Нет, проблема не в этом месте. На втором скрине (заметь) горизонтальный скроллбар еще можно скроллить вправо (еще правее ничуть не лучше), а паддинг сделан для того, что бы текст не прислонялся к самой правой стороне.

Да, фишка с display:inline-block; работает в нормальных браузерах (читай - Опера), Хроме, не всегда (по непонятной схеме) работает в ФФ3 и конечно она не работает в IE8 в режиме совместимости.

FireBug показывает список вот так:

92a5754a184c.png

что, в общем-то, верно, просто надо растянуть список на всю ширину переполненного дива-обертки.

Edited by MIT
Link to comment
Share on other sites

  • 0

Если просто список не будет, то возможно ли использовать такие варианты:

1) не просто список

2) мой альтернативный подход со скроллингом самого списка - как решить проблему с исчезающими номерами строк?

3) что-нибудь совсем альтернативное, о чем я пока не подумал

?

Буду рад любым конструктивным предложениям для достижения поставленной цели.

Добавлено:

И вот еще вопрос - как сделать перенос в строке (в li), что бы горизонтальная полоса прокрутки не появлялась?

Link to comment
Share on other sites

  • 0

Да, обидно, что никто не знает.

По поводу пропажи номеров строк: выяснил, что это зависит от установленного свойства overflow. Как можно побороть такое гнусное поведение?

Link to comment
Share on other sites

  • 0

Добавлено:

Разобрался в причине пропадания номеров. Оказывается все дело в том, что обнулялся паддинг всех элементов:

* {
padding:0;
}

Для того, что бы они магическим образом появились ставим в стиль списка padding-left:3em;

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy