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

也许这个

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

Answer 3

你的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 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个框的列表。

html / css定位三个文本框

4 个答案: