Question

我在对齐两列的左列时遇到了一些麻烦。我希望它们在页面的中心响应地显示。

这是我目前的代码：

    <div style="background: url('http://www.house-for-fast-cash.com/wp-content/uploads/2016/06/houses-background.jpg')">
<center><h2>WE BUY HOUSES Any Reason, Any Condition</h2></center>
<div style="width: 100%">
        <div style="width: 50%; float: left; display: inline-block; ">
          <ul>
            <li>Behind on taxes</li>
            <li>Behind in Payment</li>
            <li>Vacant / Vandalized</li>
            <li> Inheritance</li>
            <li>Expire Listing </li>
          </ul>
        </div>
        <div style="width: 50%; display: inline-block;">
            <ul>
              <li>Bad Tenant</li>
              <li>Facing Foreclosure</li>
              <li>Divorce</li>
              <li>Tired Landlord</li>
              <li>Fire Damage</li>
            </ul>
        </div>
    </div>
<center><h2><strong><a href="http://www.house-for-fast-cash.com/contact/">Get Me An Offer RIGHT AWAY!</a></strong><strong></h2></center>
</div>

提前致谢！

克莱尔

Answer 1

像这样制作第一个div

<div style="width: 50%; text-align:right; display: inline-block; ">

Answer 2

通过一些修改，这是可能的：

<div style="background: url('http://www.house-for-fast-cash.com/wp-content/uploads/2016/06/houses-background.jpg')">
<center><h2>WE BUY HOUSES Any Reason, Any Condition</h2>
<div style="display:inline-block;text-align:left;">
        <div style="width: 50%; float: left; display: inline-block; ">
          <ul>
            <li>Behind on taxes</li>
            <li>Behind in Payment</li>
            <li>Vacant / Vandalized</li>
            <li> Inheritance</li>
            <li>Expire Listing </li>
          </ul>
        </div>
        <div style="width: 50%; display: inline-block;">
            <ul>
              <li>Bad Tenant</li>
              <li>Facing Foreclosure</li>
              <li>Divorce</li>
              <li>Tired Landlord</li>
              <li>Fire Damage</li>
            </ul>
        </div>
    </div>
<h2><strong><a href="http://www.house-for-fast-cash.com/contact/">Get Me An Offer RIGHT AWAY!</a></strong><strong></h2></center>
</div>

请注意display:inline-block;导致DIV只有它所需的宽度，因此它可以居中。

最好将样式与HTML代码分开。

Answer 3

将外部div中的text-align设置为center，将两个内部div元素中的display设置为inline，将text-align设置为left。

这是工作代码。

<div style="background: url('http://www.house-for-fast-cash.com/wp-content/uploads/2016/06/houses-background.jpg'); ">
<center><h2>WE BUY HOUSES Any Reason, Any Condition</h2></center>
<div style=" text-align: center;">
        <div style="display: inline-block; text-align: left;">
          <ul>
            <li>Behind on taxes</li>
            <li>Behind in Payment</li>
            <li>Vacant / Vandalized</li>
            <li> Inheritance</li>
            <li>Expire Listing </li>
          </ul>
        </div>
        <div style="display: inline-block; text-align: left;">
            <ul>
              <li>Bad Tenant</li>
              <li>Facing Foreclosure</li>
              <li>Divorce</li>
              <li>Tired Landlord</li>
              <li>Fire Damage</li>
            </ul>
        </div>
    </div>
<center><h2><strong><a href="http://www.house-for-fast-cash.com/contact/">Get Me An Offer RIGHT AWAY!</a></strong><strong></h2></center>
</div>

Answer 4

一种方法是这样的：

http://codepen.io/anon/pen/qNRpoo

如果你想让第一个列表沿着子弹标记对齐，你必须把它放在一个额外的包装器中，你可以像这样做display: inline-block并再次将文本对齐到左边：

http://codepen.io/anon/pen/jryYxW

如何对齐两个div列中的一个

4 个答案: