Question

我有一个正在处理的表单，我正在尝试对齐所有字段以使其看起来很漂亮，当我将css页面链接到它时页面会变得疯狂。我不明白为什么我的textareas没有浮动到右边。

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<!--<LINK REL=StyleSheet HREF="reporter.css" TYPE="text/css">-->
<script type="text/javascript" src="calendarDateInput.js"></script>
<title>Downtime Reporting</title>
    </head>
<body>
<form action = "addissue.php" METHOD = "POST">
http://www.dynamicdrive.com/dynamicindex7/jasoncalendar.htm
<script>DateInput('orderdate', true, 'DD-MON-YYYY')</script>

Please select the application affected:
<select name = "application">
<option value = "Default1">Default2</option>
<option value = "2">2</option>
</select><br />
Start Time:  <input type = "text" name = "start" /><br />
End Time:  <input type = "text" name = "end" /><br />
Service Level Affecting? <input type = "radio" name = "sla" value = "Yes" />Yes
                         <input type = "radio" name = "sla" value = "No" />No<br />
System State:
<select name = "state">
<option value = "down">Down</option>
<option value = "degradated">Degradated</option>
<option value = "feature">Feature Broken</option>
</select><br />
Issue Description: 
<textarea name = "issuedesc"rows = "5" cols = "90">Enter Issue Description Here.</textarea><br />
Resolution Description:
<textarea name = "resdesc" rows = "5" cols = "90">Enter Resolution Description Here.</textarea><br />
Group Issue Is Assigned To:
<select name = "group">
<option value = "default1">default1</option>
<option value = "2">2</option>
</select><br />
<input type = "submit" value = "Submit">
</form>
</body>

我的css文件现在只包含此内容。

textarea{
float:right;
}

Answer 1

我刚尝试了你的代码，如果“变得疯狂”，你的意思是你的textareas浮动到右边并相互堆叠，然后这是预期的。

您是否考虑过使用简单的表格来布局表单？

<table>
    <tr>
        <td><label for="myInput">My input: </label></td>
        <td><input type="text" name="myInput" id="myInput" /></td>
    </tr>
</table>

Answer 2

你需要尝试用table来解决这个问题。会让生活更轻松。

<table>
    <tr>
        <td style="aligh: right;">Caption</td>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td style="aligh: right;">Longer Caption</td>
        <td><input type="text" /></td>
    </tr>
</table>

Answer 3

你不需要表，你只需要了解CSS浮动。将textareas之后的<br />元素更改为<br style="clear:both" />，它可能看起来更符合您的预期。

链接CSS后表单变得疯狂

3 个答案: