css - 入力ボックスの直後にdivを配置する方法は?

Question

「サブドメイン」入力ボックスの直後に「.domain.com」を取得するにはどうすればよいですか?

<div style="display:block; ">
<input type="text" placeholder="subdomain" style="width: 245px;">
<div style="float: right;">.domain.com</div>
</div>

http://jsfiddle.net/Tmusf/

Answer 1

<input type="text" placeholder="subdomain" style="width: 245px;float: left;">
<div style="float: left;">.domain.com</div>

例http://jsfiddle.net/Tmusf/1/

Answer 2

今はこれに慣れています

    <div style="display:block; ">
<input type="text" placeholder="subdomain" style="width: 245px;vertical-align:top;">
<div style="vertical-align:top; display:inline-block;">.domain.com</div>
</div>

ライブデモhttp://tinkerbin.com/NqJ4mAwm

Answer 3

これはあなたにとって最良の答えです

<div class="field">
     <input type="text" value="" class="field_site" id="site_address" name="site_address">
     <span class="text_inner">.example.com</span> 
      </div>

      <style>
       .field {
        border: 1px solid #C7C7C7;
        height: 30px;
        width: 300px;
    }
    .field_site {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        border: medium none;
        height: 30px;
        width: 200px;
    }
    .text_inner {
        color: #999999;
    }
      </style>

Answer 4

CSSをに変更<div style="display: inline">.domain.com</div>

更新されたフィドル - http://jsfiddle.net/Tmusf/2/

<div style="display:block; ">
  <input type="text" placeholder="subdomain" style="width: 245px;">
  <div style="display: inline">.domain.com</div>
</div>

または、代わりにinline elementlikeを使用でき、スタイルを設定する必要はありませんspandiv

<div style="display:block; ">
      <input type="text" placeholder="subdomain" style="width: 245px;">
      <span>.domain.com</span>
    </div>

.domain.comまたは、コンテナなしでテキストを直接追加できます

<div style="display:block; ">
          <input type="text" placeholder="subdomain" style="width: 245px;">
          .domain.com
        </div>

Answer 5

<div style="display: block;">
        <input type="text" placeholder="subdomain" style="width: 245px;" />.domain.com
    </div>

Dipaks コードとして、上記は問題に対する最も簡単で単純な解決策です。スタイルを指定したい場合は、タグで指定してください。

例：

<div style="display: block;">
        <input type="text" placeholder="subdomain" style="width: 245px;" /><span         style="color:Blue;">.domain.com</span>
    </div>