Wie mache ich eine Breitenbindung in CSS?

Ich habe mehrere Elemente in verschiedenen divs, die auf einer Linie ausgerichtet werden sollten. Ich kann seine Breite fest codieren (40% zum Beispiel), aber es scheint hässlich zu sein. Ich kann auch JS beim Laden der Seite verwenden, um genaue Werte in Pixeln anzugeben (aber es funktioniert nicht für die Größenanpassung sehr gut).Wie mache ich eine Breitenbindung in CSS?

Wie kann ich diesen Zickzack vermeiden?

Hier ist gewünschtes Ergebnis (aber ich habe width: 30% zu codieren, damit es funktioniert):

Markup:

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

Quelle

2016-06-14 Alex Zhukovskiy

Ihr Code bitte! – divy3993

HTML

oder CSS-Tabelle kann dafür nützlich sein. – Stickers

Anzeige: Tischzelle; ist der Weg zu gehen –

Antwort

Es ist so einfach wie das Hinzufügen der folgenden CSS-Regel:

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

Beispiel:

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

Aus irgendeinem Grund fügt Bootstrap Pseudoelemente :before und :after.panel-body auf, die in zusätzlichen Raum führen, wenn border-spacing verwendet wird. Sie einfach zu verstecken, scheint das Problem zu beheben.

Auch nur !important im obigen Beispiel war nur notwendig, damit das Beispiel hier funktioniert. Wenn Sie Ihr Stylesheet nach dem Bootstrap einfügen, werden sie nicht benötigt.

Quelle

2016-06-14 14:19:18 Midas

Hmm, es ist sehr gut, aber jetzt habe ich alle Ränder verloren. Kann ich sie zurückbekommen? Wenn ich 'border-spacing' verwende, erscheinen Ränder, aber ich brauche nur Ränder zwischen den Zeilen, während es Ränder zwischen jedem Element in" table "hinzufügt. –

@AlexZhukovskiy Siehe aktualisierte Antwort – Midas

Hmm, Sie sind sehr gut in CSS :) Vielen Dank für eine Antwort. Es ist genau das, wonach ich gesucht habe. –

Ich schlage vor, Sie die Eigenschaften einer Tabelle verwenden, um den Effekt zu erhalten Sie wollen. Diese Lösung kann auch so modifiziert werden, dass sie mit einem ansprechenden Design gut funktioniert.

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"> 
 
\t <div class="tr"> 
 
\t \t <div class="td"> 
 
\t \t \t <div class="label">sourceObserver_patchSize</div> 
 
\t \t </div> 
 
\t \t <div class="td"> 
 
\t \t \t <div class="value">value</div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="tr"> 
 
\t \t <div class="td"> 
 
\t \t \t <div class="label">...</div> 
 
\t \t </div> 
 
\t \t <div class="td"> 
 
\t \t \t <div class="value">...</div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Quelle

2016-06-14 14:09:27 Tim

können Sie ein solches Ergebnis erzielen, indem Monotypie Schriftart einstellen, white-space: pre und Polsterung span Elemente mit Leerzeichen auf die längste

Beispiel:

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

Quelle

2016-06-14 14:11:57 pwolaq

Verwandte Themen