2

如何在“子域”输入框之后立即获得“.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/

4

5 回答 5

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

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

于 2012-07-05T11:20:38.660 回答
1

现在习惯了

    <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

于 2012-07-05T11:22:29.690 回答
0

将 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 elementlikespan而不是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>
于 2012-07-05T11:22:00.387 回答
0 
<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>
于 2012-07-05T13:00:07.713 回答
0

这是给你的最佳答案 

<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>
于 2014-04-10T09:05:46.080 回答