0
votes

Comment appliquer la couleur d'arrière-plan à toute la zone au lieu du texte

Je suis nouveau sur le HTML et le CSS. Je ne suis pas en mesure de donner une couleur de fond pour toute la zone, comment puis-je le faire.

MON CODE:

<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>

Dor le code ci-dessus, seules les régions ont la couleur d'arrière-plan, mais je recherche quelque chose comme ça

Au lieu de cela

html css

0 commentaires

3 Réponses :

3
votes

Cela devrait vous aider

 <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>

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

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

1 commentaires

Comment cela aide-t-il et que fait-il? Vous devriez expliquer ce que vous avez changé pour aider les autres à le comprendre plus facilement, mieux sans qu'ils ne disséquent votre code.

1
votes

<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>

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

0 commentaires

2
votes

Vous pouvez essayer ceci dans votre fichier css

body{
 background-color: lightgrey;
}

Je pense que c'est ce que vous recherchez, il remplira tout le corps du document html avec la couleur de fond choisie.

0 commentaires