HTML样式帮助

Question

我需要HTML样式方面的帮助

这是案例：

<div id="hidden" style="display: none;">
<label>URL:</label>
<input type="text" name="url" size="50"/><br/>
<input type="button" id="button2" value="Update"/> <br/>
</div>
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = '';" size="25"/>

因为我们可以看到

中的所有元素

<div></div> 

单击button1时将显示

（它们最初会隐藏）。当所有字段出现时，div（button2）中的另一个按钮未对齐button1。

我想要的是当我点击button1时，button1和button2都应对齐..

我该怎么做？

Answer 1

<div id="hidden" style="display: none;">
<label>URL:</label>
<input type="text" name="url" size="50"/><br/>
</div>
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display =     '';document.getElementById('button2').style.display=''" size="25"/>
<input type="button" id="button2" value="Update" style="display:none"/>

如果您希望两个按钮彼此相邻，但第二个按钮只能在单击另一个按钮时显示，那么您需要包含脚本以显示该按钮。

Answer 2

你的意思是“对齐”？它们是否应该水平对齐，也就是说，它们应该出现在同一条线上？如果是这样，您需要删除强制换行符的<br />标记，并将div的显示设置为空白，而不是内联（因为div默认显示为块）：

<div id="hidden" style="display: none;">
    <label>URL:</label>
    <input type="text" name="url" size="50"/>
    <input type="button" id="button2" value="Update"/>
</div>
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = 'inline';" size="25" />

当您单击“获取信息”按钮时，会产生以下内容：

请注意，文本输入，更新和获取信息都在一行！

如果你希望它们全部显示为左对齐，那么当我测试它时，你提供的代码看起来很好。单击获取信息按钮后，我得到一个如下所示的显示：

[INPUT "URL" AREA]
[Update Button]
[Get Info]

如果您不想让显示器水平对齐或左对齐，那么您要寻找什么类型的对齐方式？如果这不是您正在寻找的答案，您能提供图表或屏幕截图吗？

Answer 3

我普遍同意Kiley刚才提到的内容。如果您必须保持这种确切的结构并希望按钮水平对齐，则向float:left;和<div></div>添加button1样式可以解决您的问题。

<div id="hidden" style="display:none; float:left;">
<label>Url:</label>
<input type="text" name="url" size="50" />
<input type="button" id="button2" value="Update" />
</div>
<input type="button" id="button1" value="Get Info" onClick="document.getElementById('hidden').style.display = '';" style="float:left;" size="25" />

希望有所帮助！

Answer 4

它们不应该是不对齐的，那个div上可能有一种风格。

试试这个css

#hidden {
    margin:0;
    padding:0;
}