Wie eine Grenze von gleicher Größe auf beiden Seiten einer Liste in einem div

setzen Ich versuche tatsächlich, eine Liste von Warnungen in einem <div> Center in der Mitte der Seite + reagieren anzuzeigen. Das letzte Problem, das ich habe, ist die Grenze, die nur auf der linken Seite der Liste und nicht auf der rechten Seite (die Bilder anschauen)Wie eine Grenze von gleicher Größe auf beiden Seiten einer Liste in einem div

Ich mag die Grenze zu den beiden Seiten haben:

Es ist der Code

li { 
 
    list-style-type: none; 
 
} 
 

 
.liAlerte { 
 
    border-style: solid; 
 
    margin-bottom: 5px; 
 
    word-break: break-all; 
 
} 
 

 

 
@media (max-width: 1000px) { 
 
    .alerteAllOnePagecenter {} 
 

 
    .alerteAllOnePagecenter-inner { 
 
     left: 25%; 
 
     top: 25%; 
 
     position: absolute; 
 
     width: 50%; 
 
     height: 300px; 
 
     background: #c9d0db; 
 
     text-align: center; 
 
     max-width: 500px; 
 
     max-height: 500px; 
 
    } 
 
} 
 
@media (min-width: 1000px) { 
 
    .alerteAllOnePagecenter { 
 
     left: 50%; 
 
     top: 25%; 
 
     position: absolute; 
 
    } 
 

 
    .alerteAllOnePagecenter-inner { 
 
     width: 500px; 
 
     height: 100%; 
 
     margin-left: -250px; 
 
     height: 300px; 
 
     background: #c9d0db; 
 
     text-align: center; 
 
     max-width: 500px; 
 
     max-height: 500px; 
 
    } 
 
}

<div class="alerteAllOnePagecenter"> 
 
    <div class="alerteAllOnePagecenter-inner"> 
 
    <ul clas="ulAlerteAllOnePage"> 
 
     <li class="liAlerte"> 
 
     <a><span>Level of the alert maybe</span> 
 
       <span class="time">Since X minutes</span> 
 
       <span class="message">description of the alert</span> 
 
     </a> 
 
     </li> 
 
     <li class="liAlerte"><a><span>Level of the alert maybe</span> 
 
       <span class="time">Since X minutes</span> 
 
       <span class="message">description of the alert</span> 
 
      </a> 
 
     </li> 
 
     <li class="liAlerte"><a><span>Level of the alert maybe</span> 
 
       <span class="time">Since X minutes</span> 
 
       <span class="message">description of the alert</span> 
 
      </a> 
 
     </li> 
 
     <li class="liAlerte"><a><span>Level of the alert maybe</span> 
 
       <span class="time">Since X minutes</span> 
 
       <span class="message">description of the alert</span> 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <div class="text-center"> 
 
       <a> 
 
        <strong>See All Alerts</strong> 
 
        <i class="fa fa-angle-right"></i> 
 
       </a> 
 
      </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Quelle

2017-01-13 Jerome

, die wegen Standardmarge von ul angelegt ist, li-Tags können Sie entfernen, die mit folgenden Stile

ul,li{ 
    padding:0; 
    margin:0; 
}

ul,li{ 
 
    padding:0; 
 
    margin:0; 
 
} 
 
li { 
 
    list-style-type: none; 
 
    
 
} 
 

 
.liAlerte { 
 
    border-style: solid; 
 
    margin-bottom: 5px; 
 
    word-break: break-all; 
 
} 
 

 

 
@media (max-width: 1000px) { 
 
    .alerteAllOnePagecenter {} 
 

 
    .alerteAllOnePagecenter-inner { 
 
     left: 25%; 
 
     top: 25%; 
 
     position: absolute; 
 
     width: 50%; 
 
     height: 300px; 
 
     background: #c9d0db; 
 
     text-align: center; 
 
     max-width: 500px; 
 
     max-height: 500px; 
 
    } 
 
} 
 
@media (min-width: 1000px) { 
 
    .alerteAllOnePagecenter { 
 
     left: 50%; 
 
     top: 25%; 
 
     position: absolute; 
 
    } 
 

 
    .alerteAllOnePagecenter-inner { 
 
     width: 500px; 
 
     height: 100%; 
 
     margin-left: -250px; 
 
     height: 300px; 
 
     background: #c9d0db; 
 
     text-align: center; 
 
     max-width: 500px; 
 
     max-height: 500px; 
 
    } 
 
}

<div class="alerteAllOnePagecenter"> 
 
    <div class="alerteAllOnePagecenter-inner"> 
 
    <ul clas="ulAlerteAllOnePage"> 
 
     <li class="liAlerte"> 
 
     <a><span>Level of the alert maybe</span> 
 
       <span class="time">Since X minutes</span> 
 
       <span class="message">description of the alert</span> 
 
     </a> 
 
     </li> 
 
     <li class="liAlerte"><a><span>Level of the alert maybe</span> 
 
       <span class="time">Since X minutes</span> 
 
       <span class="message">description of the alert</span> 
 
      </a> 
 
     </li> 
 
     <li class="liAlerte"><a><span>Level of the alert maybe</span> 
 
       <span class="time">Since X minutes</span> 
 
       <span class="message">description of the alert</span> 
 
      </a> 
 
     </li> 
 
     <li class="liAlerte"><a><span>Level of the alert maybe</span> 
 
       <span class="time">Since X minutes</span> 
 
       <span class="message">description of the alert</span> 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <div class="text-center"> 
 
       <a> 
 
        <strong>See All Alerts</strong> 
 
        <i class="fa fa-angle-right"></i> 
 
       </a> 
 
      </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

wenn Sie Polsterung auf beiden Seiten benötigen Sie padding-left und padding-right wie folgt

hinzufügen müssen

ul{ 
 
    padding-left:50px; 
 
    padding-right:50px; 
 
    margin:0; 
 
} 
 
li { 
 
    list-style-type: none; 
 
    
 
} 
 

 
.liAlerte { 
 
    border-style: solid; 
 
    margin-bottom: 5px; 
 
    word-break: break-all; 
 
} 
 

 

 
@media (max-width: 1000px) { 
 
    .alerteAllOnePagecenter {} 
 

 
    .alerteAllOnePagecenter-inner { 
 
     left: 25%; 
 
     top: 25%; 
 
     position: absolute; 
 
     width: 50%; 
 
     height: 300px; 
 
     background: #c9d0db; 
 
     text-align: center; 
 
     max-width: 500px; 
 
     max-height: 500px; 
 
    } 
 
} 
 
@media (min-width: 1000px) { 
 
    .alerteAllOnePagecenter { 
 
     left: 50%; 
 
     top: 25%; 
 
     position: absolute; 
 
    } 
 

 
    .alerteAllOnePagecenter-inner { 
 
     width: 500px; 
 
     height: 100%; 
 
     margin-left: -250px; 
 
     height: 300px; 
 
     background: #c9d0db; 
 
     text-align: center; 
 
     max-width: 500px; 
 
     max-height: 500px; 
 
    } 
 
}

<div class="alerteAllOnePagecenter"> 
 
    <div class="alerteAllOnePagecenter-inner"> 
 
    <ul clas="ulAlerteAllOnePage"> 
 
     <li class="liAlerte"> 
 
     <a><span>Level of the alert maybe</span> 
 
       <span class="time">Since X minutes</span> 
 
       <span class="message">description of the alert</span> 
 
     </a> 
 
     </li> 
 
     <li class="liAlerte"><a><span>Level of the alert maybe</span> 
 
       <span class="time">Since X minutes</span> 
 
       <span class="message">description of the alert</span> 
 
      </a> 
 
     </li> 
 
     <li class="liAlerte"><a><span>Level of the alert maybe</span> 
 
       <span class="time">Since X minutes</span> 
 
       <span class="message">description of the alert</span> 
 
      </a> 
 
     </li> 
 
     <li class="liAlerte"><a><span>Level of the alert maybe</span> 
 
       <span class="time">Since X minutes</span> 
 
       <span class="message">description of the alert</span> 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <div class="text-center"> 
 
       <a> 
 
        <strong>See All Alerts</strong> 
 
        <i class="fa fa-angle-right"></i> 
 
       </a> 
 
      </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Quelle

2017-01-13 08:23:16

Sie den Rand entfernt wird einführen macht, aber ich möchte das gleiche auf den 2 Seiten haben ist es möglich? ¨ – Jerome

@jerom für das müssen Sie Polsterung hinzufügen –

Ok danke für die Hilfe! – Jerome

u können entweder überprüfen diese link oder u kann Bootstrap verwenden, wo u ur-Gehalt innerhalb eines div class = „Container“ setzen können, die sie anspricht, und auch Polsterung, um Ihre Inhalte

Quelle

2017-01-13 08:29:32 vineeth

Wie eine Grenze von gleicher Größe auf beiden Seiten einer Liste in einem div

Antwort

Verwandte Themen