Question

我在不同的div中有多个元素，应该在某些行对齐。我可以硬编码它的宽度（例如40％），但它看起来很难看。我也可以在页面加载时使用JS来指定精确的像素值（但它不会很好地调整大小）。

如何避免这种曲折？

这是理想的结果（但我必须硬编码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>

Answer 1

这就像添加以下CSS规则一样简单：

.input-group {
    display: table-row;
}

示例：

.panel-body {
    border-spacing: 0 1em;
}
.panel-body:before,
.panel-body:after {
    display: none !important;
}
.input-group {
    display: table-row !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<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>

由于某种原因，Bootstrap在:before上添加了伪元素:after和.panel-body，这会在使用border-spacing时产生额外的空间。简单地隐藏它们似乎可以解决问题。

上面示例中的任何!important也只是示例在此处工作所必需的。如果在Bootstrap之后包含样式表，则不需要它们。

Answer 2

我建议你使用表格的属性来获得你想要的效果。此解决方案也可以进行修改，以便在响应式设计中正常运行。

div.table{
  display: table;
}
div.table div.tr{
  display: table-row;
}
div.table div.tr div.td{
  display: table-cell;
  padding-top: 10px;
}
div.table div.tr div.td div.label{
  background-color: lightgray;
  padding: 10px;
  border: 1px solid gray;
  border-radius: 5px 0 0 5px;
}
div.table div.tr div.td div.value{
  background-color: lightgray;
  padding: 10px;
  border-width: 1px 1px 1px 0;
  border-style: solid;
  border-color: gray;
}

<div class="table">
	<div class="tr">
		<div class="td">
			<div class="label">sourceObserver_patchSize</div>
		</div>
		<div class="td">
			<div class="value">value</div>
		</div>
	</div>
	<div class="tr">
		<div class="td">
			<div class="label">...</div>
		</div>
		<div class="td">
			<div class="value">...</div>
		</div>
	</div>
</div>

Answer 3

您可以通过将单色字体white-space: pre和填充span元素与空格设置为最长的

来实现此类结果

示例：

<style>
    .input-group-addon {
        white-space: pre;
        font-family: "Courier New", Courier, monospace;
    }
</style>

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

如何在CSS中进行宽度绑定

3 个答案: