Question

在我的网站matprichardson.co.uk上，当您点击屏幕中央对话框中的“帮助”按钮时，会弹出另一个包含部分内容的对话框。

出于某种原因，当发生这种情况时，第一个段落元素的前两行是奇怪的缩进，以及通常居中的标题。

enter image description here

我现在已经多次看过我的标记和css，我真的很难理解为什么会发生这种情况。有人可以指点我正确的方向吗？

CSS

body { 保证金：0; 填充：0; }

#maincontainer {
  font-family: arial;
  margin-bottom: 20px;
}

.dialog {
  border: 5px solid black;
  display: inline-block;
  background-color: white;
}


.dialog p, .dialog ul {
    font-family: "Courier New";
    font-size: 12px;
}

.dialogtitle h2 {
  margin: 0;
  padding: 1px 0;
  font-family: "courier new";
  font-size: 12px;
  background-color: black;
  color: white;
  text-align: center;
}

.dialogtitle {
  cursor: move;
}

.dialogcontent {
  margin: 10px;
}

.windowsbutton{
  width: 70px;
  height: 22px;
  font-family: "courier new";
  font-weight: bold;
  font-size: 12px;
  border-width:2px;
  border-top: 2px solid white;
  border-left: 2px solid white;
}

.buttonsurround {
  border: 1px solid black;
  max-width: 70px;
  border-radius:3px;
  display: inline-block;
  margin: 0 10px;
}

.buttonselected {
  border-width: 2px;
}

.windowsbutton:focus {
  outline: none;
}


#maindialog {
    position: absolute;
    top: 220px;
    left: 50%;
    margin-left: -150px;
}

#helpdialog {
    display: none;
    width: 500px;
    top: 70px;
    left: 110px;
}

#helpClose {
    margin:0 200px;
}


/*Menu*/
#menu {
    margin: 0 0 20px 0;
    padding: 0;
    height: 30px;
    background-color: black;
    width: 100%;
}



/*Icons*/
.iconcontainer {
  width: 80px;
  float: left;
}

.iconcontainer:hover {
    cursor:pointer;
}

.foldericon {
  height: 40px;
  width: 40px;
  border: 2px solid black;
  border-radius: 0 0 10px 0;
  text-align: center;
  margin: 0 auto;
  background-color: white;
}

.iconhead {
  height: 10px;
  border-bottom: 2px solid black;
  background-color:black;
}

.foldertext {
  margin-top: 5px;
}

.iconcontainer h1 {
  font-family: "Courier New";
  font-size: 12px;
  text-align: center;
  margin: 0;
  padding: 0;
}

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Mat Richardson</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
    <script src="script.js"></script>
</head>
<body>

    <div id="maincontainer">

        <div id="menu">

        </div>

        <!--an icon.  Lovely, isn't it?-->
        <div class="iconcontainer" id="blog">
            <div class="foldericon">
                <div class="iconhead">
                </div>
                <div class="iconmain">
                </div>
            </div>
            <div class="foldertext">
                <h1>blog</h1>
            </div>
        </div>

        <div class="iconcontainer" id="pictures">
            <div class="foldericon">
                <div class="iconhead">
                </div>
                <div class="iconmain">
                </div>
            </div>
            <div class="foldertext">
                <h1>pics</h1>
            </div>
        </div>

        <div class="iconcontainer" id="websites">
            <div class="foldericon">
                <div class="iconhead">
                </div>
                <div class="iconmain">
                </div>
            </div>
            <div class="foldertext">
                <h1>websites</h1>
            </div>
        </div>







        <div id="maindialog" class="dialog">
            <div class="dialogtitle">
                <h2>Welcome to matprichardson.co.uk</h2>
            </div>
            <div class="dialogcontent">
                <div class="buttonsurround buttonselected"><input type="button" id="mainOK" value="OK" class="windowsbutton" /></div>
                <div class="buttonsurround"><input type="button" value="Cancel" id="mainCancel" class="windowsbutton" /></div>
                <div class="buttonsurround"><input type="button" value="H&#818elp" id="mainHelp" class="windowsbutton" /></div>
            </div>
        </div>

        <div id="helpdialog" class="dialog">
            <div class="dialogtitle">
                <h2>Help</h2>
            </div>
            <div class="dialogcontent">
                <p>Welcome to the personal site of Mat Richardson.  There's not much to see right now,
                but do feel free to have a click about.</p>
                <p>Some links you might want to visit (or not, your choice):</p>
                <ul>
                    <li><a href="http://2toria.com">2toria</a> (another site I own)</li>
                    <li><a href="http://codepen.io/2toria/">My Codepen Profile</a></li>
                    <li><a href="http://stackoverflow.com/users/1373484/mat-richardson">My StackOverflow Profile</a></li>
                    <li><a href="https://twitter.com/matprichardson">My twitter account</a></li>
                    <li><a href="https://www.linkedin.com/profile/view?id=117558046&trk=nav_responsive_tab_profile">My LinkedIn Profile</a></li>
                </ul>
                <div id="helpClose" class="buttonsurround buttonselected"><input type="button" value="Close" class="windowsbutton" /></div>
            </div>
        </div>


    </div>



</body>
</html>

Answer 1

这是因为您的博客，网站和图片div的位置属性设置为相对属性，因此它占用了空间。更改它以便将它们设置为绝对值，并且帮助对话框中的文本恢复正常。

您可以添加以下内容：

#blog, #pictures, #websites {
    position:absolute;
}
#blog {
    left:20px;
}
#pictures {
    left:80px;
}
#websites {
    left:140px;
}

<强> jsFiddle example

Answer 2

正如我在my comment中所说：

这是因为对话框位于relative并且仍然存在记录正常流量。因此内容包装浮动图标它们位于页面的左上角。

绝对定位对话框将解决问题。

或者，您可以向对话框元素添加clear: both声明，以便清除浮动。因此，relative定位对话框的内容不再包含浮动图标。

不寻常的缩进

2 个答案: