技巧：不使用表格製作的表單方法

2010-08-04

4191
0
CSS
2011-04-25

摘要:技巧：不使用表格製作的表單方法

運用CSS的浮動技巧，簡簡單單就可以完成：

參考下面的:

 form {
   margin: 0;
 }
 form label {
   float: left;
   width: 100px;
 }
 form p {
   clear: both;
 }

文字欄位 1

文字欄位2

多行文字欄位</p> </form> <p> <a href="http://www.bankweb.com.tw">網頁設計</a> -->找<a href="http://www.bankweb.com.tw">網站銀行</a><br /> <br /> 好站推薦：<a href="http://www.itouch.com.tw"><font color="#ffffff">網頁設計</font></a><a href="http://www.superwow.com.tw"><font color="#ffffff">除臭襪</font></a></p> </div> <div class="article__tags"></div> <div class="article__navs"> <ul> <li><a href="/vipcase">回首頁</a></li> </ul> </div> <ins class="adsbygoogle" style="display: block !important" data-ad-client="ca-pub-5120420174726287" data-ad-slot="1709268749" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div data-tag data-cid="05cb0cdc-4cdd-4dc1-ba8e-a63768e2d1ab" data-bid="c4f6cfc2-fcd1-43e7-8d3c-26c640103c6c" data-sname="" data-url="/vipcase/Tags?handler=BlogTagsList" class="article__ralated-posts"> </div> <div data-serial data-cid="05cb0cdc-4cdd-4dc1-ba8e-a63768e2d1ab" data-bid="c4f6cfc2-fcd1-43e7-8d3c-26c640103c6c" data-sname="CSS" data-url="/vipcase/Series?handler=BlogSeriesList" class="article__serial-posts"> </div> </article> </div> <div class="sidebar"> <div class="search-block mobi-hide"> <form method="get" action="/vipcase/Search"> <input name="q" placeholder="請用「空白」區分關鍵字" /> <button><i class="fa fa-search"></i></button> </form> </div> <div class="side-sticky"> <ins class="adsbygoogle" style="display: inline-block !important; width: 250px; height: 250px" data-ad-client="ca-pub-5120420174726287" data-ad-slot="8394930749"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <input id="fnBlogList" name="fnBlogList" type="hidden" value="" /> </div> <input id="fnBlogDetail" name="fnBlogDetail" type="hidden" value="" /> <input id="fnView" name="fnView" type="hidden" value="/vipcase/2010/08/04/17015?handler=UpdateViewCount" /> <input name="__RequestVerificationToken" type="hidden" value="CfDJ8EGjS6Z4Ty9OhFqhPtV2RUivKcA7Upbn6F_zwvBtuCUBY91WQNcjotFg-V3v1PzNGAL097d2xsOgKSwk_08pm4egZiiOigxhcSULFHY8oM0OiwF5AHS11WH-KVpeRlPuMP9PAQZtZTg7KHpZCbWmmGY" /> </div> </div> </div> <footer class="page-footer"> <div class="center-container"> <nav class="footer-nav"> <ul> <li><a data-fancybox data-type="iframe" href="/Policy?i=1">服務規範</a></li> <li><a href="https://m.me/Dotblogs" target="_blank">聯絡我們</a></li> </ul> </nav> <div class="copyright">© 2025 點部落 Ver. 2022.9.27.1 </div> <div class="host"> <a href="http://demoshop.tw" target="_blank">電魔小鋪有限公司</a> 製作、維運；<a href="http://www.itop.com.tw" target="_blank">登豐數位科技</a> 提供資安檢測 </div> </div> </footer> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js" crossorigin="anonymous" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"> </script> <script>(window.jQuery||document.write("\u003Cscript src=\u0022/lib/jquery/jquery.min.js\u0022 crossorigin=\u0022anonymous\u0022 integrity=\u0022sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV\u002BrXbYlF2cqB8txI/8aZajjp4Bqd\u002BV6D5IgvKT\u0022\u003E\u003C/script\u003E"));</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="/js/powered_by_demoshop.js?v=39Y68HHdNm1y6RipqrL8DxzmLT9RyvUd_DvJnPg6zrQ"></script> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-575565756a486ff8"></script> </body> </html>