调整网页大小时的WhiteSpace

Question

我一直在制作一份简历，但在“工作历史”部分有一个空白的问题。一旦你开始折叠网页，无序列表就会从页面上消失，并在页面的右侧产生不需要的空白。我已经尝试了相当多的东西，也在寻找答案，但我仍然不知道如何解决这个问题。

<div id="wrapper">
<div id="leftcolumn">
    <p><b>Assurant Inc, Remote Technical Support</b></p>
  <p>April 2017 - Present</p>
</div>
<div id="rightcolumn">
    <div>
      <ul>
        <li>Remote support of mobile devices for customers of T-Mobile, US Cellular, and Comcast.</li>
        <li>Technical support via Intercom, phone call, and email.</li>
        <li>Mobile application support for iOS and Android.</li>
        <li>Training customers on utilization of "Pocket Geek," company application.</li>
        <li>Document resolutions in Microsoft Dynamics.</li>
        <li>Add articles to knowledge base in Microsoft Dynamics.</li>
        <li>Supporting customers with in home Smart Devices such as August Smart Lock, Philips Hue, LIFX, Amazon Echo, Google Home, as well as others.</li>
      </ul>
     <hr>
 </div>
</div>

​

https://codepen.io/bgongre/full/EXKXye/

提前谢谢。

Answer 1

在你的css中试试这个：

#wrapper {
    width: 80%;
    margin: 0 auto;
    display: table;
}
#leftcolumn {
    width: 20%;
}
#rightcolumn {
    width: 40%;
    margin: auto;
}

Answer 2

您必须向id=wrapper添加以下属性"display: inline-block;“，但请记住，您不能重复id，因此您必须使用一个类来命名此层