如何在一個div裏面的列表的兩邊放一個相同大小的邊框

Question

我實際上試圖在頁面+響應中間的<div>中心顯示一個警報列表。最後一個問題我是誰是隻在列表的左側，而不是右側邊框（看圖片）

我想有邊境兩側：

有代碼

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>

Answer 1

，這是因爲由UL 施加預設保證金，李個標籤您可以刪除使用以下樣式

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>

，如果您需要在兩個方面，你需要添加填充左和填充填充右如下

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>

Answer 2

ü可以檢查用戶可以在本link或U可以使用自舉其中u可以把UR內容裏面一個div類=「容器」，這使得它反應靈敏，還將推出填充到您的內容