如何在div内的列表的两侧放置相同大小的边框

Question

我实际上是尝试在页面中间的<div>中心显示警报列表+响应。我遇到的最后一个问题是边界只在列表的左侧而不在右侧（看图像）

我想要双方的边界：

有代码

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是因为 ul，li 标签应用的默认边距可以使用以下样式删除

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您需要在两侧填充，则需要添加 padding-left和padding-right ，如下所示

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以查看这个link，或者你可以使用bootstrap，你可以将你的内容放在div class =“container”中，这样​​可以使其响应并且还会为你的内容引入填充