Проблемы при создании коробки с использованием CSS - PullRequest
Новая
       18

Проблемы при создании коробки с использованием CSS

4 голосов
/ 20 сентября 2008

Я хочу создать форму коробки, и у меня возникли проблемы. Я хочу, чтобы у коробки был цвет фона, а затем другой цвет внутри коробки.
В этом поле будет список элементов с использованием ul и li, и каждый элемент списка будет иметь белый фон, а цвет фона элемента списка будет слишком растянут на все расстояние внутреннего блока. Кроме того, элементы списка должны иметь интервал между пикселями 1 пиксель, чтобы был виден цвет фона внутреннего поля.

Вот примерный набросок того, что я пытаюсь сделать:

Ответы [ 5 ]

8 голосов
/ 20 сентября 2008

Вы можете сделать это довольно чисто с помощью этого CSS: 

.box {
        width: 100px;
        border: solid #884400;
        border-width: 8px 3px 8px 3px;
        background-color: #ccaa77;
}

.box ul {
        margin: 0px;
        padding: 0px;
        padding-top: 50px; /* presuming the non-list header space at the top of
                              your box is desirable */
}

.box ul li {
        margin: 0px 2px 2px 2px; /* reduce to 1px if you find the separation
                                    sufficiently visible */
        background-color: #ffffff;
        list-style-type: none;
        padding-left: 2px;
}

и этот HTML: 

<div class="box">
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
   </ul>
</div>

DEMO

3 голосов
/ 20 сентября 2008

Итак, если у вас есть источник: 

<div class="panel">
  <div>Some other stuff</div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

Вы можете использовать CSS: 

div.panel { background-color: #A74; border: solid 0.5em #520; width: 10em; 
            border-width: 0.75em 0.25em 0.75em 0.25em; }
div.panel div { padding: 2px; height: 4em; }
div.panel ul li { display: block; background-color: white; 
                      margin: 2px; padding: 1px 4px 1px 4px; }
div.panel ul { margin: 0; padding-left: 0; }

Чтобы заставить CSS работать должным образом (особенно в Internet Explorer), убедитесь, что в вашем документе есть соответствующее определение DOCTYPE. См. Список рекомендуемых типов документов w3c .

1 голос
/ 23 апреля 2011 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Examples of margins, padding, and borders</TITLE>
    <STYLE type="text/css">
      UL { 
        background: yellow; 
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
                                     /* No borders set */
      }
      LI { 
        color: white;                /* text color is white */ 
        background: blue;            /* Content, padding will be blue */
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; /* Note 0px padding right */
        list-style: none             /* no glyphs before a list item */
                                     /* No borders set */
      }
      LI.withborder {
        border-style: dashed;
        border-width: medium;        /* sets border width on all sides */
        border-color: lime;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>First element of list
      <LI class="withborder">Second element of list is
           a bit longer to illustrate wrapping.
    </UL>
  </BODY>
</HTML>
0 голосов
/ 24 марта 2009

Html: 

<div id="content">
        <a><div class="title">Title</div>Text</a>
        <ul>
            <li>Text</li>
            <li>More Text...</li>
        </ul>
    </div>

CSS: 

#content{
            text-align:left;
            width:200px;
            background:#e0c784;
            border-top:solid 10px #7f4200;
            border-bottom:solid 10px #7f4200;
            border-right:solid 5px #7f4200;
            border-left:solid 5px #7f4200;
        }
        #content a{
            margin-left:20px;
        }

        #content ul{
            list-style-type:none;
            margin-bottom:0px;
        }
        #content ul li{
            padding-left:20px;
            margin:0px 0px 1px -40px;
            text-align:left;
            width:180px;
            list-style-type:none;
            background-color:white;
        }
        #content .title{
            text-align:center;
            font-weight:bolder;
            text-align:center;
            font-size:20px;
            border-bottom:solid 2px #ffcc99;
            background:#996633;
            color:#ffffff;
            margin-bottom:20px;
        }



Надеюсь, это поможет .... Я также добавил к нему заголовок, если он вам не нравится, просто удалите его ...

0 голосов
/ 20 сентября 2008

Может быть, эти двое помогут:

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

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

...