0

div を使用してフィールドを並べてフォームを作成しようとしましたが、行に次々と表示されます。ここで、バッチコードとコースコードを2行で取得しています。それらを1行で並べて取得する方法。

<!DOCTYPE html>
<html>  
    <head>

        <link href="css/reset.css" media="screen" rel="stylesheet"/>
        <link href="css/redmond/jquery-ui-1.10.2.custom.min.css" media="screen" rel="stylesheet"/>
        <link href="css/default.css" media="screen" rel="stylesheet"/>
        <link href="sidebarmenu.css" rel="stylesheet" type="text/css">
                <script src="sidebarmenu.js"></script>
                <script src="scripts/jquery-1.9.1.min.js"></script> 
        <script src="scripts/jquery-ui-1.10.2.custom.min.js"></script> 

</head>
    <body>  

        <!--<form id="frmExamRegistration" method="post" enctype="multipart/form-data" class="anu">-->


    <form name="f1" method="post" class="anu">  
    <%@include file="header.html"%>

<div  style="float:right;width:10%;border:0;font-color:#163362"><a href=logout.jsp">Log Out</a></div>
<%@include file="sidemenus.jsp" %>

    <div id="container">
        <div class="content"  ><center>Delete Batch</center><br>
            <div class="formElements">
                <label>Batch code:</label>
                 <span><input type="text" id="txtBatchcode" name="txtBatchcode" ></span>

            <div class="formElements" style="z-index:-1">
                <label>Course Code:</label>
                 <span><input type="text" id="txtCoursecode" name="txtCoursecode" ></span>

            <div class="buttons" align="center">
                <button type="submit" class="primaryAction">Delete</button>
                                <button type="reset" class="primaryAction">Clear</button>

            </div></div></div>
                 </div>
         </div>
       </form>
  </body>
</html>
4

4 に答える 4

0

display:inline-block;各.formElementsブロックで使用できます。

ここを参照してください：http://jsfiddle.net/hAwyy/

<div id="container">
    <div class="content">
        <h2 style="text-align:center;">Delete Batch</h2>
        <div class="formElements" style="display:inline-block;">
            <label>Batch code:</label>
            <span><input type="text" id="txtBatchcode" name="txtBatchcode" /></span>
        </div>
        <div class="formElements" style="display:inline-block;">
            <label>Course code:</label>
            <span><input type="text" id="txtCoursecode" name="txtCoursecode" /></span>
        </div>
        <div class="buttons" style="text-align:center;">
            <button type="submit" class="primaryAction">Delete</button>
            <button type="reset" class="primaryAction">Clear</button>
        </div>
    </div>
</div>
于 2013-04-03T05:02:56.753 に答える
0

これを試してください：すべてに適用されるものを定義classしますcss.formElements

<style type="text/css">
.formElements{
    display:inline;
}
</style>
于 2013-04-03T05:03:58.300 に答える
0

テーブルを使用してそれを行うことができます：

 <form name="f1" method="post" class="anu">
    <div style="float:right;width:10%;border:0;font-color:#163362">
        <a href=logout.jsp ">Log Out</a></div>


    <div id="container ">
        <div class="content "  ><center>Delete Batch</center><br>

    <table>
        <tr>
            <td>
                <label>Batch code:</label> <span><input type="text " id="txtBatchcode " name="txtBatchcode " ></span>

            </td>
            <td>
                <label>Course Code:</label> <span><input type="text " id="txtCoursecode " name="txtCoursecode " ></span>

            </td>
        </tr>
        </table>
        </div>
        </div>

</form>

デモ

テーブルを使用するのが最も簡単な方法です。CSSを使用する必要はまったくありません。

于 2013-04-03T05:12:39.653 に答える
0

その非常に単純なものを参照してください。divを左にフロートさせる..左から始まり、全幅で終わると、次の行に配置されます。

<div width="100%">
<div style="float:left , width :50%">your content here    </div>
<div style="float:left , width :50%">  your content here </div>
<div></div>,
</div>
于 2013-04-03T05:18:22.643 に答える