Question

我试图把这两个div放在一起。 State和ZipCode。我知道div是块元素，但我在css中设置了inline-block属性。这也是附件。我怎样才能让State和Zipcode彼此相邻？我一直在尝试不同的事情，并对此感到沮丧。任何帮助赞赏!!谢谢:)）

＆＃13;

<div class="dataControl dataControlSmall">
  <div class="dataControl dataControl45" style="float: left; display: block;">
    <label for="txtState" style="display: block;">State</label>
    <input id="txtState" name="txtState" class="k-textbox" style="width:35px; display: block;" maxlength="2" required="required" data-bind="value: State" />
  </div>
  <div class="dataControl dataControl45" style="float: left; display: block;">
    <label for="txtZip" style="display: block;">Zip Code</label>
    <input id="txtZip" name="txtZip" class="k-textbox" style="width:90px; display: block;" maxlength="10" required="required" data-bind="value: Zip" />
  </div>
</div>

＆＃13;

IF (@ComputerType > -1 OR @DriveType > -1 OR @EncryptionState > -1 OR 
@ProtectorType <> '-1' OR @CipherStrength > -1)
BEGIN -- Not ALL
-- restrict to parameter values
   SELECT computerType, ComputerName, DriveType, DriveLetter,
      Encryption, ProtectType, Cipher
   FROM computers
   WHERE 
     -- case @computertype > -1 and @computertype <> `100 then    @computertype=computerType 
    -- case @DriveType > -1 and @drivetype <> 100 then @drivetype = drivetype
    -- case @EncryptionState > -1 and @EncryptionState <> 100 then Encryption=@EncryptionState
   -- etc for each parameter


END
ELSE -- All
BEGIN
  -- select statement with no WHERE
END

＆＃13;

Answer 1

设置display:inline-block后，只需确保其中两个元素或元素的总宽度小于或等于其父级的100%。如果两者的组合宽度都大于父级的宽度，则第二行将显示在下一行。

＆＃13;

.dataControl {
  display: inline-block;
  margin: 5px 15px;
  border-width: 1px;
}
.dataControlSmall {
  width: 100%;
}
.dataControl45 {
  width: 45%;
}

＆＃13;

<div class="dataControl dataControlSmall">
  <div class="dataControl dataControl45" style="float: left; display: block;">
    <label for="txtState" style="display: block;">State</label>
    <input id="txtState" name="txtState" class="k-textbox" style="width:35px; display: block;" maxlength="2" required="required" data-bind="value: State" />
  </div>
  <div class="dataControl dataControl45" style="float: left; display: block;">
    <label for="txtZip" style="display: block;">Zip Code</label>
    <input id="txtZip" name="txtZip" class="k-textbox" style="width:90px; display: block;" maxlength="10" required="required" data-bind="value: Zip" />
  </div>
</div>

＆＃13;

Answer 2

设置父div的宽度。

var new_ids = (this.context.router.getCurrentQuery().exclude || []).slice();

您可能还希望根据您的要求在子div上设置宽度。

Answer 3

请参阅此fiddle

你为.dataControl设置了一个非常高的右边距，正在推动它。

减少边距值，两个div将并排排列。因此，.dataControl的新CSS将如下所示

.dataControl {
    display: inline-block;
    margin: 1px 3px;
    border-width: 1px;
}

Answer 4

内联CSS style="float:left;display:block;"会覆盖您的内部/外部CSS，并将其设置为display:inline-block;。使用其中一个;我建议不要使用内联样式。

可能有助于查看整个页面，但如果.dataControlSmall是设置宽度的30％，则输入字段太大而无法彼此堆叠，尤其是因为声明了精确的宽度（{{1 }}＆amp; width:35px;）。

如果可以，我将使用标签包装输入字段，并删除输入字段的大小声明。如果可以，请在一个位置处理您的CSS。

Answer 5

请试一试。

<强> CSS

.dataControl {
  display: inline;
  margin: 5px 15px;
  border-width: 1px;
}
.dataControlSmall {
  width: 30px;
}
.dataControl45 {
  width: 100px;
}

<强> HTML

您不需要在dataControlSmall外部使用div类，因为如果将其包含在外部div中，则会包含dataControlSmall的特征。

<div class="dataControl">
  <div class="dataControl dataControlSmall" style="float: left; display: block;">
    <label for="txtState" style="display: block;">State</label>
    <input id="txtState" name="txtState" class="k-textbox" style="width:35px; display: block;" maxlength="2" required="required" data-bind="value: State" />
  </div>
  <div class="dataControl dataControl45" style="float: left; display: block;">
    <label for="txtZip" style="display: block;">Zip Code</label>
    <input id="txtZip" name="txtZip" class="k-textbox" style="width:90px; display: block;" maxlength="10" required="required" data-bind="value: Zip" />
  </div>
</div>

如何使2个div标签彼此相邻

5 个答案:

请参阅此fiddle