Div 边框出现在错误的位置

Question

我正在尝试创建一个 'Site Under Development' 页面。我想在标题为“正在开发中”的 div-container 上加上一行边框。但是边界出现在对面。我分别用过'border-top'、'border-left'、'border-style'、'border-color'，但好像都不行。请告诉我我做错了什么。

P.S.: 也许这只是我犯的一个愚蠢的错误，但我无法发现它:(

这是代码-

body {
  background-color: #000000;
}
#underDevelopment {
  margin: 0px auto;
  width: 50em;
  padding: 1em;
  background-color: #000000;
  border-style: solid;
  border-color: #e2e2e2;
  border-top: 2px;
  border-left: 2px;
  display: block;
  clear: both;
}

<!DOCTYPE html>
<html>
 <head>
  <title>Page Title</title>
 </head>
 <body>
  <div id="underDevelopment">
        <div style="color: #ffffff; font-weight:bold;">
          UNDER DEVELOPMENT
        </div>
        <div style="color: #ffffff">
          This Website Is Currently Under Development. It Will Be Updated Soon, Visit Often So That You Donot Miss Anything.
        </div>
      </div>
 </body>
</html>

Answer 1

   #underDevelopment {
        margin: 0px auto;
        float: left;
        width: 50em;
        padding: 1em;
        background-color: #000000;
        border-style: solid;
        border-color: #e2e2e2;
        border-width: 2px 0px 0px 2px;
        display: block;
        clear: both;
    }

**试试这个 css。 **

Answer 2

border-top 和 border-left 是 shorthand 属性，包含顶部的宽度、样式和颜色和左边框分别。如果您只向这些添加宽度，浏览器将 select 其他属性的默认值，覆盖您之前的样式。

要仅应用这些边框的宽度，属性分别为 border-top-width 和 border-left-width。

当您使用 border-style 和 border-color 时，它适用于所有角落。也许您想将 border-width 用作 shorthand.

border-width: 2px 0 0 2px;

或定位每个角的宽度：

border-bottom-width: 0;
border-right-width: 0;

Answer 3

尽情享受

body {
  background-color: #000000;
}
#underDevelopment {
  margin: 0px auto;
  width: 50em;
  padding: 1em;
  background-color: #000000;
  border-top: 2px solid #e2e2e2;
  border-left: 2px solid #e2e2e2;
  display: block;
  clear: both;
}

<!DOCTYPE html>
<html>
 <head>
  <title>Page Title</title>
 </head>
 <body>
  <div id="underDevelopment">
        <div style="color: #ffffff; font-weight:bold;">
          UNDER DEVELOPMENT
        </div>
        <div style="color: #ffffff">
          This Website Is Currently Under Development. It Will Be Updated Soon, Visit Often So That You Donot Miss Anything.
        </div>
      </div>
 </body>
</html>

Div 边框出现在错误的位置

Div Border showing up at wrong place

html

css

border