Блог

Главная - Вопросы по программированию - Как применить цвет фона ко всей области, а не только к тексту

Как применить цвет фона ко всей области, а не только к тексту

#html #css

#HTML #css

Вопрос:

Я новичок в html и css. Я не могу указать цвет фона для всей области, как мне это сделать.

МОЙ КОД:

 <head>
    <style>
        ul {
            background-color: lightgray;
            list-style-type: none;
        }
    </style>
</head>

<body>
    <h2>Horizontal List</h2>
    <ul style="width:10%; float: left;">
        <li>HTML</li>
        <li>CSS</li>
        <li>HTML</li>
        <li>CSS</li>
    </ul>
    <ul style="width:10%; float: left;">
        <li>HTML</li>
        <li>CSS</li>
    </ul>
    <ul style="width:10%; float: left;">
        <li>HTML</li>
        <li>CSS</li>
        <li>HTML</li>
        <li>CSS</li>
        <li>HTML</li>
        <li>CSS</li>
    </ul>
    <ul style="width:10%; float: left;">
        <li>HTML</li>
        <li>CSS</li>
    </ul>
</body>

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

введите описание изображения здесь

Вместо этого

введите описание изображения здесь

Ответ №1:

Это должно помочь вам

 ul {
    background-color: lightgray;
    list-style-type: none;
}

.container {
  background: lightgray;
  border: 1px solid #616161;
  width: 100%;
  height: 200px;
}  
  <style>

    </style>
    </head>
    <body>
    
    <h2>Horizontal List</h2>
    <div class="container">
    <ul style="width:10%; float: left;">
      <li>HTML</li>
      <li>CSS</li>
       <li>HTML</li>
      <li>CSS</li>
    </ul>  
    <ul style="width:10%; float: left;">
      <li>HTML</li>
      <li>CSS</li>
    </ul>  
    <ul style="width:10%; float: left;">
      <li>HTML</li>
      <li>CSS</li>
       <li>HTML</li>
      <li>CSS</li>
       <li>HTML</li>
      <li>CSS</li>
    </ul>  
    <ul style="width:10%; float: left;">
      <li>HTML</li>
      <li>CSS</li>
    </ul>  
    </div>
    </body>
    </html>

Комментарии:

1. Как это помогает и что это делает? Вы должны объяснить, что вы изменили, чтобы другим было легче понять это, лучше всего без того, чтобы они разбирали ваш код.

Ответ №2:

Вы можете попробовать это в своем файле css

 body{
 background-color: lightgrey;
}

Я думаю, это то, что вы ищете, оно заполнит все тело html-документа выбранным цветом фона.

Ответ №3:

 .full-width {
  display: block;
  height: auto;
    width: 100%;
    background-color: lightgray;
}  
 <head>
</head>

<body>
    <h2>Horizontal List</h2>
    <div class="full-width">
      <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>HTML</li>
          <li>CSS</li>
      </ul>
      <ul>
          <li>HTML</li>
          <li>CSS</li>
      </ul>
      <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>HTML</li>
          <li>CSS</li>
          <li>HTML</li>
          <li>CSS</li>
      </ul>
      <ul>
          <li>HTML</li>
          <li>CSS</li>
      </ul>
    </div>
</body>