如何在不弄乱边框的情况下将<div>保留在标题内？

时间：2015-06-02 13:31:36

标签： html css

我正在尝试为自己创建一个示例页面，所以我永远不会忘记基础知识，但是出现问题，我用边框设置了＆lt; a＆gt; 的边框： 5px开始灰色; ，但现在＆lt; div id =“tab”＆gt; 出现在标题之外，我该如何修复？如果可能的话，为什么会这样呢？

你可以帮忙吗？

提前致谢。

我在liveweave上的页面：http://liveweave.com/yRuhbM; 

html{font-family:Courier;}
button{width: 50%;margin: 4%; border-radius: 5px;height: 10.6%;} /*Any button is gonna get those properties, if you don't want it, set it below it*/
label{width: 50%;margin: 4%;}
div{width: 100%;height:20%; color: white; border-radius: 0px;text-align: center;background-color: gray;}
a{text-decoration: none; color: black;border: 5px outset gray;}

.left{float:left;width: 20%;height: 60%;}
.right{float: right;width: 20%; height: 60%;}

#header{margin:auto;top:1px;}
#footer{clear:both;margin:auto;bottom: 10px;}
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Page Testing</title>
</head>
<body>
  <div id="header">
    <div id="tab">
      
        <a href="http://www.google.com">Home</a>
        <a href="http://www.google.com">Contact Us</a>
        <a href="http://www.google.com">About</a>
 
    </div>
  </div>
  <div class="left">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
    <button>Button 5</button>
    <button>Button 6</button>
  </div>
  <div class="right">
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
  </div>
  <div id="footer"></div>
</body>
</html>

7 个答案:

答案 0 :(得分：2)

添加此

a{
text-decoration: none; 
display:inline-block; 
color:black;
border: 5px outset gray;
}

Fiddle

答案 1 :(得分：2)

首先，您应该在使用<li>的地方使用<span>。

由于一些原因，您的主要元素正在推送到#header元素之外。一个是因为默认情况下ul已由浏览器应用margin。顶部和底部边距超出了#header元素。

另一个原因是因为#header元素只会与其内容或指定高度一样高。使用像您正在执行的内联元素时，内容高度可能是反直觉的。您要添加到锚元素的边框不会计为高度，因为它们是内联的，将它们切换为内联块然后边框将会出现。

答案 2 :(得分：1)

作为快速解决方法，您可以添加此内容。

a {
    display: inline-block;
}

答案 3 :(得分：1)

为什么你使用<span>如果没有必要，那么删除其他你可以使用它。并在css中添加<a> display:inline-block。
Fiddle

答案 4 :(得分：1)

li是ul而非span的孩子，更改您的标记（您可以复制我在下面所做的内容）并使用下面提供的CSS

<小时/> 的修改

另外，您应该注意，设置整个文档中的所有div高度可能不能完成，因为标记中的每个div元素都将使用这些属性。使用类。它可以防止你会遇到很多麻烦。如果您确定始终需要这些属性，则仅限样式特定的html标记。话虽这么说，你总是可以专门覆盖属性，但让你的生活更轻松，更频繁地使用类。同样的事情应该应用于HTML中的每个元素（甚至按钮），因为如果您更改过您的网站，或者最近有人在您的网站上工作，您可能希望拥有2个不同的按钮

<小时/>
＆＃13;
＆＃13; 
html {
    font-family:Courier;
}
button {
    width: 50%;
    margin: 4%;
    border-radius: 5px;
    height: 10.6%;
}
div {
    width: 100%;
    height:20%;
    color: white;
    border-radius: 0px;
    text-align: center;
    background-color: gray;
}
a {
    text-decoration: none;
}
li {
    display: inline-block;
    list-style-type: none;
    color: black;
    border: 5px outset gray;
}
.left {
    float:left;
    width: 20%;
    height: 60%;
}
.right {
    float: right;
    width: 20%;
    height: 60%;
}
#footer {
    clear:both;
    margin:auto;
    bottom: 10px;
}
＆＃13; 
<div id="header">
    <div id="tab">
        <ul>
            <li><a href="http://www.google.com">Home</a>
            </li>
            <li><a href="http://www.google.com">Contact Us</a>
            </li>
            <li><a href="http://www.google.com">About</a>
            </li>
        </ul>
    </div>
</div>
<div class="left">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
    <button>Button 5</button>
    <button>Button 6</button>
</div>
<div class="right">
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
</div>
<div id="footer"></div>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：1)

主要问题是默认情况下所有浏览器都会设置html元素。默认情况下，大多数的body和ul元素都有你需要覆盖的边距和填充：

body, ul {
  margin: 0;
  padding: 0;
}

但是，@ paulie-d是正确的：你必须有一个li元素作为ul的孩子。

要进一步解决问题，您需要为html和正文添加高度。

＆＃13;
＆＃13; 
html{font-family:Courier;}
body {margin: 0; padding:0}
ul {margin: 0; padding:0}
button{width: 50%;margin: 4%; border-radius: 5px;height: 10.6%;} /*Any button is gonna get those properties, if you don't want it, set it below it*/
label{width: 50%;margin: 4%;}
div{width: 100%;height:20%; color: white; border-radius: 0px;text-align: center;background-color: gray;}
a{text-decoration: none; color: black;border: 5px outset gray;}

.left{float:left;width: 20%;height: 60%;}
.right{float: right;width: 20%; height: 60%;}

#header{margin:auto;top:1px;}
#footer{clear:both;margin:auto;bottom: 10px;}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Page Testing</title>
</head>
<body>
  <div id="header">
    <div id="tab">
      <ul>
        <span><a href="http://www.google.com">Home</a></span>
        <span><a href="http://www.google.com">Contact Us</a></span>
        <span><a href="http://www.google.com">About</a></span>
      </ul>
    </div>
  </div>
  <div class="left">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
    <button>Button 5</button>
    <button>Button 6</button>
  </div>
  <div class="right">
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
  </div>
  <div id="footer"></div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：1)

正如Pauli_D已经指出的那样，你需要在li元素中使用ul。 这个答案与a元素的答案基本相同，但是使用ul列表的正确html完成。

＆＃13;
＆＃13; 
html{font-family:Courier;}
button{width: 50%;margin: 4%; border-radius: 5px;height: 10.6%;} /*Any button is gonna get those properties, if you don't want it, set it below it*/
label{width: 50%;margin: 4%;}
div{width: 100%;height:20%; color: white; border-radius: 0px;text-align: center;background-color: gray;}
a{text-decoration: none; color: black;border: 5px outset gray;}

.left{float:left;width: 20%;height: 60%;}
.right{float: right;width: 20%; height: 60%;}

#header{margin:auto;top:1px;}
#footer{clear:both;margin:auto;bottom: 10px;}

#tab li {
  display: inline;
  list-style: outside none;
  
}
#tab li a {
  display: inline-block;
  text-decoration: none;
  
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Page Testing</title>
</head>
<body>
  <div id="header">
    <div id="tab">
      <ul>
        <li><a href="http://www.google.com">Home</a></li>
        <li><a href="http://www.google.com">Contact Us</a></li>
        <li><a href="http://www.google.com">About</a></li>
      </ul>
    </div>
  </div>
  <div class="left">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
    <button>Button 5</button>
    <button>Button 6</button>
  </div>
  <div class="right">
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
  </div>
  <div id="footer"></div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题