Question

我正在尝试将多个东西包装在一个盒子中，即登录功能。但是，当我尝试将内容放入自己的内容中时，即使编辑了CSS之后，实际的更改也不会显示

我尝试了.boxed方法和.box + .white（用于背景）方法。都没有任何差异

<div class="form-horizontal">
        <div class="box white">
            <h4>tbl_Gebruiker</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

            <div class="form-group">
                @Html.LabelFor(model => model.gebruikersnaam, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.gebruikersnaam, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.gebruikersnaam, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.wachtwoord, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.wachtwoord, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.wachtwoord, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    </div>

对于CSS：

.box {
      width: 800px;
      height: 500px;
      border: 2px black;
  }
  .white {
      background: white;
  }

我希望发生的是登录功能被包裹在带有黑色边框的白框中。发生的事情很好，什么都没有。

Answer 1

即使应用了.box类后仍看不到边框的原因是，您尚未声明border-style。因此，将采用默认值 none （无边框）。

根据Border属性语法，它接受以下一个或多个值的组合：

border:  <border-width> || <border-style> || <color>

您所指定的是border-width和color，而没有border-style作为border属性，这使得.box类border属性为：{ {1}}。

因此，从此更改类border:2px black none：

.box

对此：

.box {
  width: 800px;
  height: 500px;
  border: 2px black;
}

您将能够看到边框。

Answer 2

如果我正确回答了您的问题，请在CSS下方进行以下操作：

.box{
width: 100%;
height:100%;
border: 2px solid black;
background:white;

}

Answer 3

您可以使用CSS

.white-box {
background: #fff;
border-radius: 15px;
padding: 0 0 35px 0;
box-shadow: rgba(0,0,0,0.1) 0 4px 5px;
border: #eee solid 1px;
height: 100%;

如何修复内容不显示的方框？

3 个答案: