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

＆＃13;

	// 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);

＆＃13;

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

＆＃13;

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

＆＃13;

我改变了代码。我想你等着这个。检查一下

Answer 2

您可以将所有列放在容器中，它会自动添加一些填充。另一种方法是添加一些偏移列。

然后你可以添加你的列表，并通过将它们的填充设置为0，你将它们对齐到左边：）

CSS：如何向左移动<ul>并将其与页脚中的<p>元素对齐

2 个答案: