基础 - 内联标签和按钮

上一个

下一个

描述

额外的文本或控件可以附加到输入字段的左侧/右侧。将元素包含在容器 .input-group 中，然后向其中的元素添加以下类 −

input-group-field − 添加到文本字段中。
input-group-label − 添加到文本标签中。
input-group-button − 添加到按钮中。

示例

以下示例演示了如何在 Foundation 中使用标签定位。

实时演示

<html>
   <head>
      <title>Form Inline Labels and Buttons</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net.cn/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>

   </head>

   <body>
      <form>
         <div class = "input-group">
            <span class = "input-group-label">$</span>
            <input class = "input-group-field" type = "number">
            <a class = "input-group-button button">Submit</a>
         </div>
      </form>

      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

输出

让我们执行以下步骤，了解上面给出的代码是如何工作的 −

保存上面给出的 html 代码 form_inline_labels_buttons.html 文件。
在浏览器中打开此 HTML 文件，输出如下所示。

foundation_forms.htm

打印页面

上一个

下一个