4

我对css不是很擅长，但我有以下两种形式：

    //below is where it displays course name

        $outputcourse = ""; 
        $outputcourse .= "<p><strong>Course:</strong> " . $course .  " - "  . $coursename . "</p>";

    //below is where it displays module name

    $outputmodule = ""; 
    $outputmodule = sprintf("<p><strong>Module:</strong> %s - %s</p>", $moduleId, $moduleName);

    //below is form where it displays assessments drop down menu

        $assessmentform = "<form action='".htmlentities($_SERVER['PHP_SELF'])."' method='post'>
<p>{$outputcourse}</p>
<p>{$outputmodule}</p>
        <p><strong>Assessments:</strong> {$sessionHTML} </p>   
        </form>";

        echo $assessmentform;

        }

        //below is form where it displays all of the text inputs and submit button

        $editsession = "<form id='updateForm'>

            <p><strong>Current Assessment's Date/Start Time:</strong></p>
            <table>
            <tr>
            <th>Assessment:</th>
            <td><input type='text' id='currentAssessment' name='Assessmentcurrent' readonly='readonly' value='' /> </td>
            </tr>
            <tr>
            <th>Date:</th>
            <td><input type='text' id='currentDate' name='Datecurrent' readonly='readonly' value='' /> </td>
            </tr>
            <tr>
            <th>Start Time:</th>
            <td><input type='text' id='currentTime' name='Timecurrent' readonly='readonly' value=''/> </td>
            </tr>
            </table>
            <div id='currentAlert'></div>

            <p><strong>New Assessment's Date/Start Time:</strong></p>
            <table>
            <tr>
            <th>Assessment:</th>
            <td><input type='text' id='newAssessment' name='Assessmentnew' readonly='readonly' value='' /> </td>
            </tr>
            <tr>
            <th>Date:</th> 
            <td><input type='text' id='newDate' name='Datenew' readonly='readonly' value='' /> </td>
            </tr>
            <tr>
            <th>Start Time:</th> 
            <td><input type='text' id='newTime' name='Timenew' readonly='readonly' value=''/><span class='timepicker_button_trigger'><img src='Images/clock.gif' alt='Choose Time' /></span> </td>
            </tr>
            </table>
            <div id='datetimeAlert'></div>

            </form>

            <p><button id='updateSubmit'>Update Date/Start Time</button></p>

            <div id='targetdiv'></div>
        ";

        echo $editsession;

CSS：

form#assessmentForm {
 float: left; 
 border: 1px solid red;
}
form#updateForm {
 float:left;
 clear: right;
 /* with some space to the left of the second form */
 margin-right: 100px; 
}
p#submitupdatebtn {
  clear: both;
}

目前，两种形式都显示在彼此之上。我真正想做的是显示$editsession表单，显示$assessmentform在右侧表单旁边，两个表单之间有一点空间。

如何做到这一点？我希望它适用于所有主要浏览器。

下面显示了合并在一起的两个屏幕截图，以显示我希望它如何显示：

在此处输入图像描述

谢谢

更新：

下面是它现在显示的内容：

在此处输入图像描述

4

2 回答 2

8

您只需要float: left;表单，建议也clear: right;使用第二个表单，这样其他浮动元素就不会出现在它的右侧。最后，clear: both;在<p>第二种形式之后的那个上，所以没有前面的元素浮动到它的左边或右边。

form {
 /* Float both forms to the left */
 float: left; 
 /* borders added for visibility. Just remove them */
 border: 1px solid red;
}
form#updateForm {
 clear: right;
 /* with some space to the left of the second form */
 margin-right: 20px; 
}
/* Give an id to the <p> which follows the second form and clear: both */
p#submit {
  clear: both;
}

在你的标记中，给<p>跟在第二种形式后面的 id 一个 id，这样它就可以很容易地在 CSS 中定位

<p id='submit'><button id='updateSubmit'>Update Date/Start Time</button></p>

然后将其移动到前面的<form>标签内，因为它是该表单的一部分。

这是一个演示

于 2012-11-17T02:11:30.207 回答
0

使用浮动

你只需要将它添加到你的第一个表单标签中，

然后第二个跳到第一个表单的右侧

于 2012-11-17T02:11:43.733 回答