html - CSS:如何向左浮动 <ul> 并将其对齐到页脚中的中心 <p> 元素

Question

我正在尝试使用 max-width 1366px 和 width:100% 创建自适应 3 列页脚。里面有三列，都向左浮动，宽度设置为 33%。 在每一列的中心，我想放置一个标题和一个无序列表。问题是我想将标题对齐到列的中心并且我想左对齐 <ul> <li>元素，以便它们从标题开始的地方开始，但不与中心对齐。有趣的是我完全不知道我应该如何实现它。为了向您展示所需结果的示例，我将 padding-left:25% 设置为每个 ul它将列表项设置为最接近我想要的结果，但这当然不是解决方案。

想要的结果

HTML

<div id="footer">
    <div class="col">
    <p id="col-heading">HEALTHCARE SALARIES</p>
    <ul>
        <li>Home</li>
        <li>Top Healthcare Salaries</li>
        <li>Scholarship guide</li>
        <li>Student loan hacks</li>
        <li>Tuition</li>
        <li>Blog</li>
        <li>Contacts</li>
    </ul>
    </div>

    <div class="col">
    <p id="col-heading">MOST POPULAR CAREERS</p>
    <ul>
        <li>Home</li>
        <li>Top Healthcare Salaries</li>
        <li>Scholarship guide</li>
        <li>Student loan hacks</li>
        <li>Tuition</li>
        <li>Blog</li>
        <li>Contacts</li>
    </ul>
    </div>

    <div class="col">
    <p id="col-heading">FOLLOW HEALTHCARE SALARIES</p>
    </div>
   </div>

CSS

 /* FOOTER */

#footer {
width: 100%;
max-width: 1366px;
height: 360px;
background-color:#003C7A;
color: white;
}

.col {
width: 33.3%;
float:left;
padding-top: 50px;
}

#col-heading {
text-align: center; 
margin-bottom: 37px;
}

.col p {
text-align: center; 
}   


.col ul {

    list-style: none;

}

Answer 1

	// set first ul
	var fWidth = $('.footer.one').width();
	var hWidth = $('.footer.one header').width();
	var ulWidth = fWidth - hWidth;
	var ulWidth = ulWidth/2;
	$('.footer.one ul').css("padding-left", ulWidth);
	
	// set second ul
	var fWidth = $('.footer.two').width();
	var hWidth = $('.footer.two header').width();
	var ulWidth = fWidth - hWidth;
	var ulWidth = ulWidth/2;
	$('.footer.two ul').css("padding-left", ulWidth);

footer {
  width: 100%;
  max-width: 1366px;
  text-align: center;
  background: #000;
  color: #fff;
  overflow: auto;
  margin: 0 auto;
}

.footer {
  width: 33.33%;
  float: left;
}

header {
  font-weight: bold;
  padding: 10px 0;
  display: inline-block;
}

.footer ul {
    padding: 0;
	text-align: left;
	position: relative;
}

.footer ul li {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer>
  <div class="footer one">
    <header>Heading Name Test 01</header>
    <ul>
      <li>Aliquam feugiat nun</li>
      <li>Aliquam feugiat nunc</li>  
      <li>Aliquam feugiat nunc</li>  
      <li>Aliquam feugiat nunc</li>  
      <li>Aliquam feugiat nunc</li>  
      <li>Aliquam feugiat nunc</li>  
    </ul>
  </div>
  <div class="footer two">
    <header>Heading Name heading</header>
    <ul>
      <li>Aliquam feugiat nunc</li>
      <li>Aliquam feugiat nunc</li>  
      <li>Aliquam feugiat nunc</li>  
      <li>Aliquam feugiat nunc</li>  
      <li>Aliquam feugiat nunc</li>  
      <li>Aliquam feugiat nunc</li>  
    </ul>
  </div>
  <div class="footer">
    <header>Heading Name</header>
  </div>
</footer>

我更改了代码。我想你等了这个。检查这个