css - 如何使输入宽度与标签宽度相关？

Question

我有一个 540px 宽label的input并排的div。包含label一个域名，例如：http://domain.tld/并且input将在其中输入 URL slug。问题是域名可以根据用户而改变（并将改变），这意味着label' 的宽度也会改变，导致input宽度太小或宽度太大。在第一种情况下会导致丑陋的设计，在第二种情况下会导致浮动损坏。

有人对我有任何技巧或提示吗？还是我必须要ninja-javascript这个东西？感谢所有帮助。

Answer 1

如果我认为我理解你想要什么让输入始终保持一致？如果是这样，您可以通过将 then 放入列表或使用 div 来执行此操作，但将父元素设置position为relative，然后作为输入的子元素获取其位置absolute并为其指定位置absolute并将 设置top为 0 和设置right为 0

jsFiddle http://jsfiddle.net/uVSRX/

CSS

.example { width: 340px;}

li { position: relative;} 

input {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
}

HTML

<div class="example">
<ul>
    <li><label>Short</label><input type="text"/></li>
    <li><label>Looooooong</label><input type="text"/></li>
</ul>

PS：您可能因为没有提供任何代码而被否决了:(