1

これが私が今していることです。デザインにLESS CSSを使用しています。指定した入力の間に 2 つのスパンを配置する必要があります。すべての要素の幅は 100% でな​​ければなりません。スパンは常に 20px 幅にする必要があります。入力幅は画面幅に応じて変更できます。誰でも私を助けることができますか？

スパン幅: 20px;

私が必要とする方法

<div class="wrapper">
 <span class="span-one">span</span>
 <input type="text" class="input">
 <span class="span-two">span</span>
</div>
4

3 に答える 3

1

これは、絶対配置で実現できます。フローからスパンを取り出し、入力の上に置きます。また、display:block が設定されている場合、自然に 100% の幅にならないため、これを行うには入力を div に配置する必要があります。

HTML

<div class="wrapper">
 <span class="span-one">span</span>
 <div class="input"><input type="text" class="input"></div>
 <span class="span-two">span</span>
</div>

CSS

.wrapper { position: relative; }

div.input { margin: 0 20px; }

input { 
    width: 100%;
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; }

span.span-one {
  position: absolute;
  width:20px; height:20px;
  left:0; top:0;
  background-color: red; }

span.span-two {
  position: absolute;
  width:20px; height:20px;
  right:0; top:0;
  background-color: red; }

これがフィドルです：http://jsfiddle.net/ywUeu/1/

もちろん、スパン内の「スパン」という単語は 20px よりも長いため、スパンからはみ出します。私もやったように、入力に「ボックスサイジング」を追加するのが最善かもしれません。

于 2013-08-14T16:06:58.340 に答える
1

ポジショニングは理想的ではありませんが、あなたはすでに回答を承認しています...これは参考までに....

ポジショニングの代わりに:display: table-cell;

http://jsfiddle.net/Riskbreaker/CBC5A/1/

于 2013-08-14T16:18:11.300 に答える
0

あなたのHTMLで：

.wrapper, .text {
  width: 100%;
}
.wrapper > span {
  display: inline-block;
  width: 20px;
}
.wrapper.input {
  width: calc(100% - 40px);
}

より良い方法：

<div class="wrapper">
  <div class="input"><input type="text" class="text-input"></div>
</div>

CSS:

/*
.wrapper, .input{ width is 100% by default }
*/
.text-input{
  margin: 0 20px;
  width: calc(100% - 40px);
}
于 2013-08-14T16:10:14.810 に答える