html - html/css定位三个文本框

Question

我目前正在尝试编写自己的投资组合网站并努力定位三个文本框。在我的网站上，我希望将页面左侧、中间和右侧的框全部排成一行。

我尝试了不同的方法，例如将每个文本框单独放置div并尝试定位它们，但它们仅位于下方，而不是彼此相邻，将 css 规则内联。我还尝试将这些框作为列表并尝试将它们内联。

有任何想法吗？

Answer 1

尝试这个

<div id="con">
    <div class="float">Hello</div>
    <div class="float">World</div>
</div>

和CSS

.float { float:left; width:100px; height:100px; background:yellow; }

在此处检查JSFiddle

Answer 2

你的 html 是这样的：

<div></div>
<div></div>
<div></div>

和CSS：

div{width:30%;margin:1%;border:1px solid blue; float:left; height:100px;}

这是一个示例：http: //jsfiddle.net/795T4/。

Answer 3

也许这

.foo
{
  float: left;
  width: 33%;
}

Answer 4

有一些像这样的html

<ul class="portfolio">
    <li><input id="txtBox1" type="text"></li>
    <li><input id="txtBox2" type="text"></li>
    <li class="last"><input id="txtBox3" type="text"></li>
</ul>

和 css 沿线

.portfolio{
    margin:10px auto;
    width:1000px

}
.portfolio li{
    float:left;
    display:block;
    width:330px;
    height:200px;
    background-color:#e4e4e4;
    margin-right:15px
}
.portfolio .last{
    margin-right:0
}

这是基于固定宽度的站点，我会使用无序列表<ul>，因为从语义上讲，您有一个包含 3 个框的列表。