0
私は異なるdivに複数の要素があります。 私はその幅（例えば40％）をハードコードすることができますが、それは醜いようです。ページロード時にJSを使用してピクセル単位で正確な値を指定することもできます（しかし、サイズ変更にはうまくいかないでしょう）。CSSで幅のバインディングを作成する方法
どのようにこのジグザグを避けることができますか？ここで
は結果を求められている（しかし、私はそれを動作させるためにwidth: 30%をハードコーディングする必要がある）： 
マークアップ：
<div class="panel-body">
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_patchSize</span>
<input id="sourceObserver_patchSize" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.PatchSize" initial-value="@Model.Custom.PatchSize" value="@Model.Custom.PatchSize.RenderIfNotEqual(Model.Default.PatchSize)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_scanInterval</span>
<input id="sourceObserver_scanInterval" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.ScanInterval" initial-value="@Model.Custom.ScanInterval" value="@Model.Custom.ScanInterval.RenderIfNotEqual(Model.Default.ScanInterval)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_maxWaitingTime</span>
<input id="sourceObserver_maxWaitingTime" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MaxWaitingTime" initial-value="@Model.Custom.MaxWaitingTime" value="@Model.Custom.MaxWaitingTime.RenderIfNotEqual(Model.Default.MaxWaitingTime)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_shutdownTimeout</span>
<input id="sourceObserver_shutdownTimeout" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.ShutdownTimeout" initial-value="@Model.Custom.ShutdownTimeout" value="@Model.Custom.ShutdownTimeout.RenderIfNotEqual(Model.Default.ShutdownTimeout)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_maximumBytes</span>
<input id="sourceObserver_maximumBytes" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MemoryLimit.MaximumBytes" initial-value="@Model.Custom.MemoryLimit.MaximumBytes" value="@Model.Custom.MemoryLimit.MaximumBytes.RenderIfNotEqual(Model.Default.MemoryLimit.MaximumBytes)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_freeMemoryWaitMs</span>
<input id="sourceObserver_freeMemoryWaitMs" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MemoryLimit.FreeMemoryWaitMs" initial-value="@Model.Custom.MemoryLimit.FreeMemoryWaitMs" value="@Model.Custom.MemoryLimit.FreeMemoryWaitMs.RenderIfNotEqual(Model.Default.MemoryLimit.FreeMemoryWaitMs)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_freeMemoryWaitCount</span>
<input id="sourceObserver_freeMemoryWaitCount" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MemoryLimit.FreeMemoryWaitCount" initial-value="@Model.Custom.MemoryLimit.FreeMemoryWaitCount" value="@Model.Custom.MemoryLimit.FreeMemoryWaitCount.RenderIfNotEqual(Model.Default.MemoryLimit.FreeMemoryWaitCount)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
</div>
あなたのコードをどうぞ！ – divy3993
HTML
ディスプレイ：table-cell;行く方法です –
答えて
次のCSSルールを追加します：
例：何らかの理由で
、ブートストラップは
border-spacingが使用されている場合、余分なスペースが生じ擬似要素:beforeと.panel-bodyに:afterを追加します。単にそれらを隠すだけで問題を解決するようです。また、上記の例の
!importantは、例がここで動作するために必要なだけです。ブートストラップの後にスタイルシートを含めると、それらは必要ありません。出典
2016-06-14 14:19:18 Midas
ええと、それはとても良いですが、今はすべてのマージンを失いました。私はそれらを取り戻すことができますか？ 'border-spacing 'を使うと余白が出ますが、行間に余白が必要ですが、" table "の各要素の間に余白が追加されます。 –
@AlexZhukovskiy更新された回答を参照してください – Midas
うーん、あなたはCSSで非常に良いです:)答えていただきありがとうございます。それはまさに私が探していたものです。 –
私はあなたが効果を得るために、テーブルのプロパティを使用することをお勧めあなたは欲しい。このソリューションは、レスポンシブなデザインでうまく動作するように変更することもできます。
出典
2016-06-14 14:09:27 Tim
あなたは最長1つの
例にモノタイプフォント、
white-space: preパディングスペースをspan要素を設定することにより、このような結果を得ることができます：それは同じくらい簡単です出典
2016-06-14 14:11:57 pwolaq
関連する問題