1

私は現在、自分のポートフォリオ Web サイトをコーディングしようとしていて、3 つのテキスト ボックスを配置するのに苦労しています。私のウェブサイトでは、ボックスをページの左、中央、右に一列に配置したいと考えています。

各テキストボックスを別々divに配置して配置しようとするなど、さまざまなことを試しましたが、CSSルールをインラインで配置するだけで、隣同士ではなく下に配置します。また、ボックスをリストにしてインライン化しようとしました。

何か案は？

4

4 に答える 4

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を確認してください

于 2013-01-08T09:24:05.037 に答える
0

このようないくつかの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 つのボックスのリストがあるため、Unordered List を使用します。

于 2013-01-08T10:27:33.617 に答える
0

多分これ

.foo
{
  float: left;
  width: 33%;
}
于 2013-01-08T09:21:42.227 に答える
0

あなたの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/。

于 2013-01-08T09:30:53.460 に答える