Question

我正在尝试在标题div的底部添加1px边框，但它没有显示。
任何人都可以帮忙吗？

是否与我在标题height中添加指定的div有关？或者与利润率下降有关？或两者兼而有之？？

这就是我在CSS中所拥有的......

@charset "UTF-8";

body {
    font: 100%/1.4;
    background-color:#FFF;
    margin: 0;
    padding: 0;
    color: #000;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { 
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;   
    padding-right: 15px;
    padding-left: 15px; 
}

h1 {
    font-family: 'Abel', Arial, sans-serif;
    font-size:24px;

}

h2 {
    font-family: 'Abel', Arial, sans-serif;
    font-size:18px;
}

p {
    font-family: 'Cutive Mono', Georgia, serif;
    font-size:14px;

}

#home #homelink,
#aboutus #aboutuslink,
#ourwork #ourworklink,
#contactus #contactuslink {
    font-family: 'Abel', Arial, sans-serif;
    color: #494949;
    font-size:17px;
    text-decoration:none;
}

#mainNav {
    margin: 0;
    padding: 0;
    list-style: none;
}

#mainNav li {
    float: left;
    padding: 40px 20px 0 20px;
}

#mainNav li:first-child {
    border-left: 0px;
    padding-left: 0px;
}

#mainNav a {
    font-family: 'Abel', Arial, sans-serif;
    color: #666;
    font-size:17px;
    text-decoration:none;
    padding: 0 20px 0 20px;
}

#mainNav a:hover {
    color:#FFF;
    background-color: #494949;
}

a img { 
    border: none;
}

a:link {
    color: #42413C;
    text-decoration: underline; 
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus { 
    text-decoration: none;
}

.container {
    width: 1352px;
    background-image:url(Images/sktchbook-bgd.jpg);
    background-repeat:no-repeat;
    margin: 0 auto; 
}

.header {
    width: 780px;
    height: 82px;
    margin-left:90px;
    margin-right: 90px;
    border-bottom: 1px #494949;
}

.sidebar-logo {
    float: left;
    width: 70px;
}

.subcontainer {
    width: 980px;
    min-height: 880px;
    margin: 0 auto;
}


.content {

    padding: 10px 0;
    margin-left:90px;
    margin-right:90px;
}


.fltrt {  
    float: right;
    margin-left: 8px;
}
.fltlft { 
    float: left;
    margin-right: 8px;
}
.clearfloat { 
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

和HTML ...

<body>

<div class="container">
<div class="subcontainer">
<div class="header">

<div id="mainNav">
  <ul id="mainNav">
  <li class="firstitem"><a href="#" id="home" target="_self">Home</a></li>
  <li><a href="#" id="aboutus" target="_self">About Us</a></li>
  <li><a href="#" id="ourwork" target="_self">Our Work </a></li>
  <li><a href="#" id="flashlink" target="_self">Contact Us </a></li>
  </ul>
</div>  

</div>
      <div class="sidebar-logo"><img src="Images/k-blondel-design-logo.png" width="64" height="108" alt="K Blondel Design logo" />
    </div>
  <div class="content">
    <h1>Instructions    </h1>
    <p>At K Blondel Design we aim to fill the gap between the over exuberant furniture maker and the general carpenter. Trained in the art of creating affordable and elegant solutions to 3D problems.</p>
    <p>As a small business we are able to deliver a personal one to one design service, talking through various design and material possibilities and arriving at an affordable, bespoke and stylish solution.</p>
    <p>From design through to construction and installation we specialise in storage solutions, furniture and interiors for both the domestic and commercial markets. </p>
    <p>We have 20 years' design and commercial experience and an ever-growing client list spanning Sussex, Hampshire, London and Kent.</p>

    <!-- end .content --></div>
    <!-- end .subcontainer --></div>
  <!-- end .container --></div>
</body>
</html>

Answer 1

你应该提一下边框样式eg.solid：

.header {
    width: 780px;
    height: 82px;
    margin-left:90px;
    margin-right: 90px;
    border-bottom: 1px solid #494949;
}

jsfiddle

Answer 2

试试这种风格

border-bottom: 1px solid #494949;

或

border-bottom: 1px dotted #494949;

border-bottom没有显示在标题div上

2 个答案: