使用 Foundation 时将 ul 与输入内联

Question

我正在使用 Foundation，但在获取与输入字段内联显示的列表时遇到困难。

我有一个 Plunkr：http://plnkr.co/edit/jKWAWs6oI0TT44vJWvKu?p=info

我的标记如下：

 <body>
    <div class="row">
      <div class="small-3 columns">
        <label class="right inline">Label</label>
      </div>
      <div class="small-9 columns">

          <input type="text" />
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
          </ul>

      </div>
    </div>
  </body>

我试过将 input 和 ul 放在一个 span 中，并将它们都设置为向左浮动，但它不起作用。

在我的应用程序中，ul 将包含验证错误列表。我正在使用 Angular 并且在验证输入后会动态添加 ul，因此我不想更改标记以将 ul 放在另一个 div 旁边。

Answer 1

您的代码中存在一些问题：

您的 CSS 规则的优先级低于 Foundation 中定义的优先级。因此，您的 padding、margin 和 float 属性将被覆盖。我通过添加额外的 class
你输入的width是100%（Foundation设置的），你需要缩小它的宽度，让input和ul可以显示在同一行。

我的CSS

.myinput input,
.myinput ul {
  float: left;
  margin: 0 4% 0 0;
  padding: 0;
  width: 45%;
}
li {
  list-style-type: none;
}

和HTML（看看myinput class）：

<div class="small-9 columns myinput">

  <input type="text" />
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>

</div>

在线演示在这里：plunkr

使用 Foundation 时将 ul 与输入内联

Inline ul with input when using Foundation

html

css

zurb-foundation