边框底部没有正确显示

时间：2015-11-16 12:44:24

标签： html css

我正在尝试将边框底部放在我页面上的标题上，但它似乎强调整个div而不仅仅是文本。有没有人造成这种情况以及如何解决这个问题？

http://jsfiddle.net/1sue4ueg

HTML 

<body>
<div id="mainContent">

    <div id="infoContent">
        <a href="#"><img src="./style/logo.svg" class="logo" alt="Drift"></a>
         <canvas resize="true" id="canvas" style="-webkit-user-select: none; touch-action: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" width="657" height="780" data-paper-scope="1"></canvas>
    </div>

    <div id="projectContent" style="height: auto;">
            <div id="newBlock">
            <div id="aboutBlock">
                           <p>DRIFT is een nieuwe organisatie in het Gentse: een ‘ontwikkelingsplatform’ dat zich volledig richt op de artistieke en zakelijke ontwikkeling van jonge kunstenaars.</p>
            </div>
            <div id="newsBlock">
                <div id="newsHead"><div id="newsTitle" class="blockTitle"><p>NIEUWS</p></div><div class="newsDate">13.12.2015</div> </div><div id="newsContent">PARADIS — Hof van Eede & LOD
Componist<br>Thomas Smetryns koopt online een oude foto van een jonge danseres. Even later valt er een lijvig fotoboek in zijn brievenbus. Een leven in puzzelvorm, zo lijkt het.</div>         </div>

        </div>

        <div id="recentWorkBlock">
                <div id="recentWorkTitle" class="blockTitle">BINNENKORT</div>
                <table>
                    <tbody>

                        <tr class="blockRecentProjet" data-projet="17"><td class="colNameProj"><span class="nameProject">Kein applaus für scheisse</span></td><td class="colNumberProj "><span class="">17.12.2015</span></td></tr>
                        <tr class="blockRecentProjet recentSelectedProject" data-projet="16"><td class="colNameProj"><span class="nameProject">Kokokito</span></td><td class="colNumberProj "><span class="">24.12.2015</span></td></tr>
                        <tr class="blockRecentProjet" data-projet="15"><td class="colNameProj"><span class="nameProject">We don’t speak to be understood</span></td><td class="colNumberProj "><span class="">06.01.2016</span></td></tr>
                        <tr class="blockRecentProjet" data-projet="14"><td class="colNameProj"><span class="nameProject">So you can feel</span></td><td class="colNumberProj "><span class="">22.01.2016</span> </td></tr>
                        <tr class="blockRecentProjet" data-projet="13"><td class="colNameProj"><span class="nameProject">Mystery Magnet</span></td><td class="colNumberProj "><span class="">12.02.2016</span>

                    </td>
                    </tr>
                    </tbody>
                    </table>
            </div>

<div id="newsBlock">
                <div id="newsHead"><div id="newsTitle" class="blockTitle">DRIFT ORGANISEERT</div><div id="newsContent">
LAB — Vrijplaats voor experiment, ontmoeting en uitwisseling van artiesten voor/tijdens het creatieproces.<br><br>
OP DRIFT — Ad hoc-creatiesessies waarin artistieke talen elkaar kruisen en uitmonden in hogedruktoonmomenten bij In de Ruimte<br><br>
DE AVONDEN — Leessalon in NTGent: hedendaags repertoire en nieuwe stukken worden samen gelezen en bediscussieerd met een groep jonge acteurs, makers, regisseurs en dramaturgen; begeleid door NTGent.<br><br>
WORKSHOPS — Vanaf 2017 organiseert DRIFT workshops rond verschillende inhouden, vormen en disciplines, i.s.m. diverse partnerorganisaties.<br><br>
RESIDENTIES — Ontwikkelingsresidenties vanaf 2017.</div>            </div>

        </div>

                <div id="contactBlock">
                    <div id="contactTitle" class="blockTitle">CONTACT:</div>
                    <div id="listContact">
                        <div class="personnalInfo">
                            <a href="#">
                           <p>Campo Victoria<br>
Fratersplein 7<br>
9000 Gent<br>
Ruth Mariën <br>
+32497186317<br>
info@drift.be

<div id="contactBlock">
                    <div id="contactTitle" class="blockTitle">MAATSCHAPPELIJKE ZETEL</div>
                    <div id="listContact">
                        <div class="personnalInfo"
<p>Kouter 108<br>
9000 Gent<br>
Ondernemingsnummer: 633756230</p>
            </a>
                        </div>
                    </div>

                </div>
    </div>
</div></body></html>

CSS 

body, html
{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body, html, div, p, table, th, tr, td, li, ul, form, img
{
    margin: 0;
}

body
{
    -webkit-font-smoothing: antialiased;

    -moz-font-feature-settings: "liga", "kern";
    -moz-font-feature-settings:"liga=1, kern=1";
    -ms-font-feature-settings:"liga", "kern";
    -o-font-feature-settings:"liga", "kern";
    -webkit-font-feature-settings:"liga", "kern";
    font-feature-settings: "liga", "kern";
}

/*
@font-face
{
    font-family: Swiss!important; 
    src: url('AtlasGrotesk-Medium.otf');
}
*/

@font-face {
    font-family: "Swiss";
    src: url("swiss-721-medium-bt.eot");
    src: url("swiss-721-medium-bt.eot#iefix") format("embedded-opentype"),
    url("swiss-721-medium-bt.woff") format("woff"),
    url("swiss-721-medium-bt.ttf") format("truetype"),
    url("swiss-721-medium-bt.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

.logo {
  display: block;
  padding-top: 15px;
  width: 275px;
  height: auto;
}

canvas[resize] {
    width: 100%;
    height: 100%;
}


.blockTitle
{
    font-family: Swiss!important; 
    font-size: 8pt;
        line-height: 12pt;
    display: inline-block;
    vertical-align: top;
        height: 10px;
        margin-bottom: 15px;
}

.blockTitle > p {
    border-bottom: 3px solid black;
}

#mainContent
{
        position: absolute;
        left: 15px;
        right: 15px;
        top: 0px; /*7px;*/
        /*padding-top:6px;*/
        bottom: 0px;
        overflow: auto;

    /* min-width: 984px;  1024 - 2x20 */
        /*
    margin-left: 10px;
        margin-right: 10px;
        margin-top: 7px;
        */
}

#infoContent
{
    /*width: 624px;*/
    width: 580px;
    display: inline-block;
    z-index: 42;
    position: relative;
    height: 100%;
    overflow: hidden;
    /* background-color: #fff; */
}


#wrapperRight {
    right: 0px;
    cursor: e-resize;
}
#wrapperLeft {
    left: 0px;
    cursor: w-resize;
}

.navArrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;

    z-index: 99;
}

#projetsList
{
    position: relative;
}

#mainTitles
{
    margin-top: 6px;
    height: 10px;
}

#mainTitles > div
{
    display: block;
    float: left;
}

#mainInfoTitle
{
    /*
    margin-left: 105.7px;
    width: 105.7px; */
    margin-left: 98.3px;
    width: 98.3px;
    height: 10px;
   /* display: inline-block;*/
}

#mainInfoTitle a:visited,
#mainInfoTitle a:active,
#mainInfoTitle a:hover,
#mainInfoTitle a
{
    text-decoration: none;
    color: black;
}

#aboutTitle, #overviewTitle
{
    /*width: 105.7px;*/
    width: 98.3px;
    display: inline-block;
    height: 10px;
}

#overviewTitle
{
    /*margin-left: 105.7px;*/
    margin-left: 98.3px;

    cursor: pointer;
}

#recentWorkTitle
{
    /*margin-left: 105.7px;*/
    margin-left: 98.3px;
}

#newBlock
{
    margin-top: 3px;
}



/** 5 most recents projects **/

.blockRecentProjet
{
    font-family: Swiss!important; 
    font-size: 8pt;
        line-height:  10pt;
    /*width: 250px;*/
        cursor: pointer;
}

.blockRecentProjet .colNameProj
{
    /*width: 211.4px;*/
    width: 196.6px;
}

.blockRecentProjet.recentSelectedProject .colNumberProj
{
    color: blue;
}


#aboutBlock
{
    font-family: Swiss!important; 
    font-size: 15pt;
    line-height: 16pt;
    text-align: left;
    padding-top: 15px;
}
/*
#aboutBlock .line1 {
    letter-spacing: 0;
}
#aboutBlock .line2 {
    letter-spacing: -0.010em;
}
#aboutBlock .line3 {
    letter-spacing: -0.005em;
}
#aboutBlock .line4 {
    letter-spacing: 0;
}
#aboutBlock .line5 {
    letter-spacing: 0.015em;
}
*/

#aboutBlock .line1 {
    letter-spacing: -0.015em;
}
#aboutBlock .line2 {
    letter-spacing: 0.0em;
}
#aboutBlock .line3 {
    letter-spacing: 0.0em;
}
#aboutBlock .line4 {
    letter-spacing: 0.015em;
}
#aboutBlock .line5 {
    letter-spacing: -0.015em;
}
#aboutBlock .line6 {
    letter-spacing: 0.0em;
}

/** News block style
**/
#newsBlock
{
    margin-top: 10px;
    font-family: Swiss!important; 
    font-size: 15pt;
    line-height: 17pt;
}

#newsBlock .newsDate, #newsBlock #newsTitle
{
    display: inline-block;
    height: 10px;
    line-height: 12pt;
}

#newsBlock #newsTitle
{
    /*width: 95.7px;
    margin-left: 105.7px;*/
    width: 200px;
    margin-left: 98.3px;


}

#newsBlock .newsDate
{
    font-family: Swiss!important; 
    font-size: 8pt;
    /*margin-left: 221.4px;*/
    margin-left: 196.6px;
}

#newsBlock #newsContent
{
    /*margin-top: 2px;*/
    text-align: left;
    font-family: Swiss!important; 
    font-size: 15pt;
    line-height: 17pt;

}

/** list of all last projects **/

#recentWorkBlock
{
    margin-top: 10px;

}

#recentWorkBlock table{
    border-collapse: collapse;
    border-spacing: 0px;
    padding: 0;
}

#recentWorkBlock table td,
#recentWorkBlock table tr
{
    vertical-align: top;
    padding: 0;
}


#projetsList
{
    margin-top: 2px;
    font-family: Swiss!important; 
    font-size: 8pt;
    line-height:  10pt;

    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2
}

#projetsList .blockInfoProjet
{
    margin-bottom: 0px;
    display: block;
    cursor: pointer;
    margin: 0;
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */

}

#projetsList .blockInfoProjet .numProjet
{
    /*width: 85px;*/
    /*margin-left: 115.7px;*/
    margin-left: 108.3px;
    display: inline-block;
}

#projetsList .blockInfoProjet .mainInfoProject
{
    /*width: 95.7px;*/
        width: 88.3px;
    display: inline-block;
    vertical-align: top;
}

#projetsList .blockInfoProjet .contentProj
{
    vertical-align: top;
    /*width: 191.4px;*/
        width: 176.6px;
    display: inline-block;
    margin-left: 10px;
}

.projectSelected .numProjet
{
    color: blue;
}

.viewedProj
{
  /*  color: #9400D3;*/
}

#projetsList .titleCategory
{
    margin-top: 12pt;
    /*width: 95.7px;*/
    width: 88.3px;
    display: inline-block;
}
/*
#projetsList .charCategory
{
    width: 105.7px;
    display: inline-block;
}
*/

#projetsList .categoryName
{
    display: inline-block;
}


/**
* Right part
**/

#projectContent
{
    vertical-align: top;
    position: absolute;
    overflow: auto;

    z-index: 20;

    top: 0px;
    /*right: 10px;*/
    /*width: 507px;*/
    width: 580px;
    left: 590px;
    height: 100%;
    /* bottom: 40px; */

    display: inline-block;
}

.wrapperPreview
{
    float: left;
    display: inline-block;
    height: 100%;
    cursor: pointer;
    position: absolute;
    top: 0;

    z-index: 30;
}

#infoZoomProject
{
    z-index: 20;

    top: 22px;
    /*bottom: 0px;*/
    position: absolute;
    /*width: 507px;*/
    width: 580px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;

    cursor: pointer;
}

#infoZoomProject .previewBigImage,
#tempNewBlock .previewBigImage,
#tempOldBlock .previewBigImage
{
    /*width: 507px;*/
    width: 580px;
    height: auto;
   /* max-height: 100%;*/
    max-width: 100%;
}

#tempNewBlock
{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;

    top: 22px;
    /*width: 507px;*/
    width: 580px;
    position: fixed;
}

#tempOldBlock
{
    z-index: 20;

    top: 22px;
    /*bottom: 0px;*/
    position: absolute;

    /*width: 507px;*/
    width: 580px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;

    cursor: auto;   
}

.zoomImageProject
{
    width: 100%;
    height: 100%;

    overflow: hidden;
}

#infoZoomProject img
{

}


#indexProject, #indexProjectWrapper, #zoomTitleProject
{
    font-family: Swiss!important; 
    font-size: 8pt;
    display: inline-block;
}

#indexProject
{
    color: blue;
}

#indexProjectWrapper
{
    width: 100%;
    height: 20px;
    text-align: center;
    margin: 0 auto;
    padding-top: 4px;
}

#zoomTitleProject
{
  /*  position: fixed;
    bottom: 14px;

    left: 634px;
    right: 15px;
  */
    text-align: center;
    height: 20px;
    /*width: 507px;*/
    width: 580px;
    margin-top: 6px;
}



/**
** zoom on a project
**/
#listPictureProject
{
    display: none;

    position: fixed;
    top : 20px;
    /*width: 507px;*/
    width: 580px;
    /*left: 649px;  634 + 15 */
    left: 605px;
    bottom: 0px;
}

.mainViewDetail
{
    width: 580px;
    height: 100%;
    background-position-x: center;
    background-position-y: top;
    background-size: contain;
    background-repeat: no-repeat;
}

.wrapperEvent
{
    float: left;
    display: inline-block;
    height: 100%;
    cursor: pointer;
}


#wrapperListProject
{
    width: 100%;
    height: 100%;

    overflow: hidden;

}

.imageDetailProject
{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;

    width: 100%;
    height: 172px;

    margin-bottom: 20px;
    text-align: center;

    display: inline-block;
    cursor: pointer;
}

.imageDetailProject img
{
   /* width: 100%*/
   height: 250px;
   margin: 0 auto;
}

.wrapperDetailBlock
{
    width: 49%;
    display: inline-block;
}

#wrapperListProject .leftDetail
{
    margin-right: 2%;
}


/**
** show list of project previews
**/

#listOverviewProjects
{
    display: none;

    position: fixed;
    top : 0px;

    width: 1160px;
    /*left: 649px;*/
    left: 15px;
    bottom: 0px;

}

#wrapperOverview
{
    width: 100%;
    height: 100%;
    padding-top: 23px;
    overflow: hidden;
}

.colOverview
{
    padding: 0 5px;
    width: 24.1%;
    display: inline-block;
    vertical-align: top;
    float: left;
    position: relative;
}

#wrapperOverview .firstCol .previewImageProj
{
    padding-left: 0 !important;
}

#wrapperOverview .lastCol .previewImageProj
{
    padding-right: 0 !important;
}


.blockPreviewOverview
{
    cursor: pointer;
    width: 250px;
    display: inline-block;
    vertical-align: top;
}

.previewMargin
{
    margin-right: 7px;
}

.previewImageProj
{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;

    width: 100%;
    /*height: 200px;*/

    cursor: pointer;

    margin-bottom: 20px;
   /* padding: 0 5px;*/
    text-align: center;

    display: inline-block;
}

.previewImageProj img
{
    width: 100%;
}


/**
* contact block
*/

#listContact
{
    width: 100%;

    overflow: overlay;
}

.personnalInfo
{
    vertical-align: top;
    /*width: 201.3px;*/
    width: 400px;
    float: left;
    font-family: Swiss!important; 
    font-size: 15pt;
    display: inline-block;
    margin-right: 10px;
}

.personnalInfo a, .personnalInfo a:hover, .personnalInfo a:visited
{
    text-decoration: none;
    color: #000;
    cursor: pointer;
}

.BMEMail
{
    letter-spacing: -0.015em;
}



#contactTitle
{
    margin-top: 10px;
    /*margin-left: 105.7px;
    width: 95.7px;*/
    margin-bottom: 4px;
    margin-left: 98.3px;
    width: 150px;
}

.lineHeadProj
{
    display: inline-block;
}

提前致谢

2 个答案:

答案 0 :(得分：0)

<p>是块元素，意味着它们的宽度为100％。将其添加到您的CSS .blockTitle > p { display: inline-block; }，它应该可以正常工作

JSFiddle

答案 1 :(得分：0)

我建议你采取p替换p标记bcz，.blockTitle > p { border-bottom: 3px solid black; display: inline-block; } 标记用于段落，如果你想在相同的代码上工作那么修改css 

app.controller("PieCtrl", function ($scope, $timeout, pieItems) {
    $scope.labels = pieItems.labelsItems();
    $scope.data = pieItems.data();


    function watcherFunction(newData) {
        $scope.labels = pieItems.labelsItems(); //just an array of strings. 
        $scope.data = pieItems.data(); //just an array of number values

        $scope.colours = ["rgba(224, 108, 112, 1)",
            "rgba(224, 108, 112, 1)",
            "rgba(224, 108, 112, 1)"] //not working

        $scope.colors = ["rgba(224, 108, 112, 1)",
            "rgba(224, 108, 112, 1)",
            "rgba(224, 108, 112, 1)"] //also not working

    }

    $scope.$watch(pieItems.list, watcherFunction, true);
    $scope.$watch(pieItems.getTitle, watcherFunction, true);

});
相关问题
最新问题