为什么我的文本区域框在不同浏览器中的位置不同

发布于 2024-10-03 07:00:48 字数 760 浏览 0 评论 0原文

这是html结构。

       <form id="coment"....>
  <div id="name"><input....>....</div>
   <div id="email"><input....>....</div>
  <div id="website"><input....>....</div>
  <div id="textbox"><textarea...>....</div>
<div id="submit"><input...>....</div>
 </form>

我希望文本区域框位于姓名、电子邮件、网站文本的右侧。就像这张图所示。 http://run.xxmn.com/1.png

当我将此样式添加到“ textbox”，

    width:400px;
   position: relative;
   top: -70px;
    left: 3px;

在Chrome和IE 8中，文本区域的div id无序，位于姓名、电子邮件、网站部分的上方。

在Firefox、IE6、7.it中显示ok。

我怎样才能让它在 Chrome 和 IE 8 中也正确？

原文

this is the html structure.

       <form id="coment"....>
  <div id="name"><input....>....</div>
   <div id="email"><input....>....</div>
  <div id="website"><input....>....</div>
  <div id="textbox"><textarea...>....</div>
<div id="submit"><input...>....</div>
 </form>

i want the textarea box is on the right of the name,email,website's text. like this picture shows. http://run.xxmn.com/1.png

when i add this style to the "textbox",

    width:400px;
   position: relative;
   top: -70px;
    left: 3px;

in Chrome and IE 8, the textarea's div id unorder,it's on the above of the name,email,website's part.

In Firefox, IE6,7.it shows ok.

How can I make it be right in Chrome and IE 8 too?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

把人绕傻吧 2024-10-10 07:00:48

正确的布局方法是创建一个新的 div 来表示表单的列，并将三个输入放在左列中，将文本框放在右列中。

例如：

<div class="left">
    <div id="name"><input....>....</div>
    <div id="email"><input....>....</div>
    <div id="website"><input....>....</div>
</div>
<div class="right">
    <div id="textbox"><textarea...>....</div>
</div>

那么：

.left {
    float: left;
    width: 50%;
}

.right {
    float: right;
    width: 50%;
}

#name, #email, #website, #textbox {
    width: 100%;
}

#testbox {
    height: 300px; /* However tall it needs to be */
}

The correct way to lay this out would be to create a new divs representing columns for the form and place the three inputs in the left column and the textbox in the right column.

For example:

<div class="left">
    <div id="name"><input....>....</div>
    <div id="email"><input....>....</div>
    <div id="website"><input....>....</div>
</div>
<div class="right">
    <div id="textbox"><textarea...>....</div>
</div>

Then:

.left {
    float: left;
    width: 50%;
}

.right {
    float: right;
    width: 50%;
}

#name, #email, #website, #textbox {
    width: 100%;
}

#testbox {
    height: 300px; /* However tall it needs to be */
}

回复收藏 0 原文

~没有更多了~