Question

我有this免费菲律宾短信网站，你可以看到我无法将验证码图像与文本框对齐。它位于验证码图像下方。如何对齐文本框？这是我的代码。我正在使用基础CSS框架。

<body>
      <div class="row">
         <div class="large-12 columns">
            <div class="nav-bar right">
               <ul class="button-group">
                  <li><a href="index" class="button">Free SMS</a></li>
                  <li><a href="contact" class="button">Contact Me</a></li>
               </ul>
            </div>
            <img src="img/smsbanner.png">
            <hr/>
         </div>
      </div>
      <div class="row">
         <div class="large-4 large-centered columns">
            <div class="large-12 columns">
               <form action="sendsms.php" method="POST" name="txtform" data-abide>
                  <div class="row">
                     <div class="large-12 columns">
                        <div class="row">
                           <div class="small-3 columns">
                              <label for="right-label" class="right">+63</label>
                           </div>
                           <div class="small-9 columns">
                              <input type="text" name="txt_number" placeholder="10 digit number" required pattern="number" maxlength="10"/>
                              <small class="error">Phone number is required.</small>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="large-12 columns">
                        <textarea  rows="10" cols="50" placeholder="Message" required maxlength="200" name="txt_body" style="resize:none;"
                           onKeyDown="limitText(this.form.txt_body,this.form.countdown,200);" 
                           onKeyUp="limitText(this.form.txt_body,this.form.countdown,200);"></textarea>
                        <small class="error">Your message is required.</small>
                        <div class="row">
                        <div class="small-5 columns">
                        <img id="captcha" src="securimage/securimage_show.php" alt="CAPTCHA Image" />
                        </div>
                        <div class="small=7 columns">
                        <input type="text" name="captcha_code" size="10" maxlength="6" style="width:100px;"/>
                        <a href="#" onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false">[ Different Image ]</a>
                        </div>
                        </div>
                        <div class="row">
                           <div class="small-4 columns">
                              <input readonly type="text" name="countdown" size="3" value="200"> 
                           </div>
                           <div class="small-8 columns">
                              characters left.
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="large-12 large-centered columns">
                        <input type="submit" class="button expand" value="Send" name="send_btn"/>
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </div>

       <footer class="row">
       <?php include 'footer.php'; ?>
      </footer>
      <script src="js/vendor/jquery.js"></script>
      <script src="js/foundation.min.js"></script>
      <script>
         $(document).foundation();
      </script>
   </body>

Answer 1

看起来像一个非常小的问题。

<div class="small=7 columns">

应该是

<div class="small-7 columns">

基础网格无法对齐

1 个答案: