html - 如何在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,li 标签应用了默认边距，您可以使用以下样式删除它

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>

如果你需要在两边填充你需要添加padding-left和padding-right如下

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>