Foundation - 標籤定位

說明

你可以將標籤放置在你的輸入框左側或右側。
要將標籤放置在右側，請使用.text-right或.float-right類。
要將標籤放置在左側，請使用.text-left或.float-left類。
你可以新增.middle類將標籤垂直居中對齊其輸入框。

示例

以下示例演示在 Foundation 中使用標籤定位。

<html>
   <head>
      <title>Form Label Positioning</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/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/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>

   </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>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

輸出

讓我們執行以下步驟，看看上面給出的程式碼如何工作 −

儲存上述 html 程式碼form_label_positioning.html檔案。
在瀏覽器中開啟此 HTML 檔案，你會看到如下所示的輸出。

foundation_forms.htm

列印頁面

上一個

下一個