如何以2列形式创建边框?

时间:2013-12-22 18:03:26

标签: html5 forms css3 styles multiple-columns

在我的网站上,我有一个2栏的预订表格。表格的一部分我有表格,所以我放入两列,但我想在它们之间有一个分隔符,但我想不出办法这样做。

我研究了如何通过在css中添加分隔符来修复它,但它无法正常工作。

我将表单置于'fiedlset'模式。

这是CSS布局:

    <style>         


    fieldset{

    background-color: #52854C;
    font-family: Georgia;
    color: white;
    border: 2px black solid; 
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius:15px;
     border-radius: 15px;

    -webkit-box-shadow:inset 1px 1px 2px #999;
    -moz-box-shadow:inset 1px 1px 2px #999;
    -khtml-box-shadow:inset 1px 1px 2px #999;
     box-shadow:inset 1px 1px 2px #999;
     }



    </style>    

这是HTML表单:

    <fieldset>

        <p><label>Full Address:<input type="text" id="rtstreet" name="rtstreet" style="margin:5px; width:320px; height:15px"></label></p></center>

                    <table>

                    <td><label>Airport Name:</label><input type="text" id="airport" style="width:70px; height:15px">

                    <td><label>Airline Code/Name:</label><input type="text" id="airport" style="width:45px; height:15px">

                    <td><label>Flight #:</label><input type="text" id="airport" style="width:35px; height:15px">



            </table>

           </div>


     <div style="float:right list-style:none;">

      <ul li><h1 class="lead" style="font-weight:bold; color:black;list-style:none;">Drop-Off Information</h1></ul li>

   <p><label>Full Address:<input type="text" id="rtstreet" name="rtstreet" style="margin:5px; width:320px; height:15px"></label></p></center>

                    <table>

                    <td><label>Airport Name:<input type="text" id="airport" style="width:70px; height:15px">

                    <td><label>Airline Code/Name:<input type="text" id="airport" style="width:45px; height:15px">

                    <td><label>Flight #:<input type="text" id="airport" style="width:35px; height:15px">



            </table>


    </div>  

            <br>
            <br>
           </br>
           </br>
           </fieldset>

任何帮助/建议或提示都会非常有用!

1 个答案:

答案 0 :(得分:0)

你正在做的是你给了场集的外边缘边界。您需要为tr / td标签指定单独的ID,然后在css中提供适当的值:

border-left
border-right
border-top
border-bottom