css - 对齐输入下方的文本

Question

我有一个带有下面列表的文本输入。

我现在希望列表恰好在左侧输入的下方开始。

这是一个jsFiddle.

CSS/HTML/演示

body {
  text-align: center;
}
#underbox li {
  display: inline-block;
  text-decoration: underline;
}

<input type="text" style="width: 200px;" />
<ul id="underbox">
  <li>Test</li>
  <li>Next</li>
</ul>

Answer 1

将样式更改为:

body{
    text-align: center;
}
input {
    width: 200px;
}
ul {
    text-align: left;
    margin: 0 auto;
    padding: 0;
    width: 200px;
}
#underbox li{
    display: inline-block;
    text-decoration: underline;
}

input 和 ul => 相同的宽度/ ul => text-align: center; margin :0 auto(用于将位置设置为中心)；填充:0(禁用默认样式)； jsfiddle