标签定位(Label Positioning)

优质
小牛编辑
132浏览
2023-12-01

描述 (Description)

  • 您可以将标签放在输入的leftright

  • 要在右侧放置标签,请使用.text-right.float-right类。

  • 要在左侧放置标签,请使用.text-left.float-left类。

  • 您可以添加.middle类以将标签垂直对齐其输入。

例子 (Example)

以下示例演示了在Foundation中使用label positioning

<html>
   <head>
      <title>Form Label Positioning</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
   </head>
   <body>
      <form>
         <div class = "row">
            <div class = "small-6 columns">
               <label for = "right-label" class = "text-right">Label</label>
            </div>
            <div class = "small-6 columns">
               <input type = "text" id = "right-label" placeholder = "Right aligned">
            </div>
         </div>
         <div class = "row">
            <div class = "small-6 columns">
               <label for = "left-label" class = "text-left">Label</label>
            </div>
            <div class = "small-6 columns">
               <input type = "text" id = "left-label" placeholder = "Left aligned">
            </div>
         </div>
         <div class = "row">
            <div class = "small-6 columns">
               <label for = "middle-label" class = "text-right middle">Label</label>
            </div>
            <div class = "small-6 columns">
               <input type = "text" id = "middle-label" placeholder = "Right and middle aligned text input">
            </div>
         </div>
      </form>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>