Question

如何在'subdomain'输入框后面找到'.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

将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 element代替span，而不是div，而您无需设置样式

<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 4

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

作为Dipaks代码，Above是解决您问题的最简单，最简单的解决方案。如果你想提供一些样式，请在标签中给出。

示例：

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

Answer 5

这是你的最佳答案

<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>

如何在输入框后右侧放置div？

5 个答案: