Question

我在ul里面有两个lis。我无法成为lis的中心。我可以通过给它固定宽度来居中。可以在没有给出固定宽度的情况下完成吗？

.PhNumber_email_list {
  display: inline-block;
  clear: both;
  padding: 10px 0px;
  width: 100%;
  margin: 0 auto;
  max-width: 700px;
  border: 2px solid black;
}
.PhNumber_email_list li {
  list-style: none;
  float: left;
  margin: 5px 20px;
  position: relative;
}
.PhNumber_email_list li input {
  border: 2px solid #196edf;
  width: 100%;
  padding: 15px 5px;
  color: #3f3f3f;
  text-align: center;
  font-weight: 700;
}

<ul class="PhNumber_email_list">
  <li>
    <input type="text" placeholder="Email">
    <p class="hint">Your email is kept private and secure</p>
  </li>
  <li>
    <input type="text" class="PhNumber_mask" placeholder="Phone Number  (Optional)">
    <p class="hint">Get exclusive support</p>
  </li>
</ul>

继承人fiddle

Answer 1

如果使用百分比作为<li>的宽度，我认为你可以。在以下示例中，我已将box-sizing: border-box添加到li和li input以在宽度中包含填充和边框大小。我在width: 50%添加了li，并将margin更改为padding。

.PhNumber_email_list {
  display: inline-block;
  padding: 10px 0px;
  width: 100%;
  margin: 0 auto;
  max-width: 700px;
  border: 2px solid black;
}
.PhNumber_email_list li {
  box-sizing: border-box;
  list-style: none;
  float: left;
  padding: 5px 20px;
  width: 50%;
}
.PhNumber_email_list li input {
  box-sizing: border-box;
  border: 2px solid #196edf;
  width: 100%;
  padding: 15px 5px;
  color: #3f3f3f;
  text-align: center;
  font-weight: 700;
}

<ul class="PhNumber_email_list">
  <li>
    <input type="text" placeholder="Email">
    <p class="hint">Your email is kept private and secure</p>
  </li>
  <li>
    <input type="text" class="PhNumber_mask" placeholder="Phone Number  (Optional)">
    <p class="hint">Get exclusive support</p>
  </li>
</ul>

Answer 2

演示 - http://jsfiddle.net/99stwpnp/3/

对box-sizing:border-box使用input，以便padding从内部计算

而不是float:left使用display:inline-block，以便您在不给width

的情况下居中

.PhNumber_email_list {
  display: inline-block;
  clear: both;
  text-align: center;
  padding: 10px 0px;
  width: 100%;
  margin: 0 auto;
  max-width: 700px;
  border: 2px solid black;
}
.PhNumber_email_list li {
  list-style: none;
  display: inline-block;
  margin: 5px 20px;
  position: relative;
}
.PhNumber_email_list li input {
  border: 2px solid #196edf;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 5px;
  color: #3f3f3f;
  text-align: center;
  font-weight: 700;
}

<ul class="PhNumber_email_list">
  <li>
    <input type="text" placeholder="Email">
    <p class="hint">Your email is kept private and secure</p>
  </li>
  <li>
    <input type="text" class="PhNumber_mask" placeholder="Phone Number  (Optional)">
    <p class="hint">Get exclusive support</p>
  </li>
</ul>

中心两个lis水平在ul里面

2 个答案: