css - 在 css 中使用 span 标签换行

Question

<span class="brandname"><p class="Hfirst">Kra
<span   class="Hsecond">fterrz</span></p></span>
<p>Text</p>

文本出现在 Krafterrz 之后的下一行。我需要删除此换行符。

据我所知，span 是一个内联元素。那为什么我会得到这个换行符？

CSS 看起来像这样:

.Hfirst{

      color: #002060;
    }

     .Hsecond{
       color: #000000;
    }


    .brandname {
      font-family: 'Edwardian Script';
      font-size: 48px;
    }
    .brandname :first-letter {
     font-size: 72px;

}

我该如何解决这个问题？我希望 Text 与 Krafterrz 内联。

编辑:我怀疑它是否被其他一些 CSS 类覆盖，所以这是我目前所拥有的:

<div id="wrapper">
    <div id="menu-wrapper">
    <div id = "Logo" >
        <img src="images/Logo.png" ></img>
    </div>
        <div id="menu" class="container">

            <ul>
                <li class="current_page_item"><a href="#">Homepage</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

    </div>
    <div id="banner">
    </div>
    <div id="page" class="container">
        <div id="content">
           <span class="brandname"><p class="Hfirst">Kra<span class="Hsecond">fterrz</span></p></span>





    <div class="title">
            <span class="byline">Who are we</span> </div>
        <span class="brandname"><p class="Hfirst">Kra<span class="Hsecond">fterrz</span> 


           </p></span>
          <p>Text </p>

CSS:

html, body {
    height: 100%;
}

body {
    margin: 0px;
    padding: 0px;
    background: #16a085;
    font-family: 'Raleway', sans-serif;
    font-size: 11pt;
    font-weight: 400;
    color: #363636;
}


h1, h2, h3 {
    margin: 0;
    padding: 0;
}

p, ol, ul {
    margin-top: 0px;
}

p {
    line-height: 190%;
}

strong {
}

a {
    color: #171717;
}

a:hover {
    text-decoration: none;
}

a img {
    border: none;
}

    .image
    {
        display: inline-block;
    }

        .image img
        {
            display: block;
            width: 100%;
        }

    .image-full
    {
        display: block;
        width: 100%;
        margin: 0 0 2em 0;
    }

    .image-left
    {
        float: left;
        margin: 0 2em 2em 0;
    }

    .image-centered
    {
        display: block;
        margin: 0 0 2em 0;
    }

        .image-centered img
        {
            margin: 0 auto;
            width: auto;
        }

hr {
    display: none;
}


/*********************************************************************************/
/* List Styles                                                                   */
/*********************************************************************************/

    ul.style1
    {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    ul.style1 li
    {
        border-top: solid 1px #E5E5E5;
        padding: 0.80em 0;
    }

    ul.style1 li:first-child
    {
        border-top: 0;
        padding-top: 0;
    }

    ul.style2
    {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    ul.style2 li
    {
        border-top: solid 1px #E5E5E5;
        padding: 0.80em 0;
    }

    ul.style2 li:first-child
    {
        border-top: 0;
        padding-top: 0;
    }

/*********************************************************************************/
/* Social Icon Styles                                                            */
/*********************************************************************************/

    ul.contact
    {
        margin: 0;
        padding: 1.5em 0em 2.5em 0em;
        list-style: none;
    }

    ul.contact li
    {
        display: inline-block;
        padding: 0em 0.30em;
        font-size: 1em;
    }

    ul.contact li span
    {
        display: none;
        margin: 0;
        padding: 0;
    }

    ul.contact li a
    {
        color: #FFF;
    }

    ul.contact li a:before
    {
        display: inline-block;
        background: #3f3f3f;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #FFFFFF;
    }

    ul.contact li a.icon-twitter:before { background: #2DAAE4; }
    ul.contact li a.icon-facebook:before { background: #39599F; }
    ul.contact li a.icon-dribbble:before { background: #C4376B; }
    ul.contact li a.icon-tumblr:before { background: #31516A; }
    ul.contact li a.icon-rss:before { background: #F2600B; }


/*********************************************************************************/
/* Heading Titles                                                                */
/*********************************************************************************/

    .title
    {
        margin-bottom: 2em;
        text-transform: uppercase;
    }

    .title h2
    {
        font-weight: 400;
        font-size: 2em;
        color: #16a085;
    }

    .title .byline
    {
        letter-spacing: 0.15em;
        text-transform: uppercase;
        font-weight: 400;
        font-size: 0.90em;
        color: #6F6F6F;
    }

/** WRAPPER */

#wrapper {
    background: #FFFFFF url(images/bg01.png) repeat;
}

#footer-wrapper
{
    background: #0F0F0F;
}

.container {
    width: 1200px;
    margin: 0px auto;
}

.clearfix {
    clear: both;
}


/*********************************************************************************/
/* Wrappers                                                                      */
/*********************************************************************************/

#header-wrapper
{
    overflow: hidden;
    background: url(images/bg01.png) repeat;
    background-size: 100%;
    padding: 6em 0em 2em 0em;
    background: #333333;
}


/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

    #header 
    {
        position: relative;
        overflow: hidden;
        text-align: center;
    }

/*********************************************************************************/
/* Logo                                                                          */
/*********************************************************************************/

/*#logo 
    {
        width: 500px;
        height: 100px;
        margin: 0 auto;
        padding: 2em 0em;
        text-transform: uppercase;
    }

    #logo h1
    {
        letter-spacing: 0.10em;
        font-size: 3em;
    }

    #logo p 
    {
        letter-spacing: 0.10em;
        color: #FFF;
    }

    #logo a 
    {
        text-decoration: none;
        color: #FFF;
    }*/

/*********************************************************************************/
/* Banner                                                                        */
/*********************************************************************************/

    #banner 
    {
        overflow: hidden;
        height: 300px;
        position: relative;
        background: url(images/pic02.png) no-repeat center;
        background-size: cover;
    }

    #banner .image
    {
    }
    #banner p{
    position: absolute; 
    top:30%;
    left: 40%;
    width: 100px;
    padding: 5px; 
    margin: 5px;
    font-family: 'Edwardian Script';
    font-weight: 590;

    }

    .Hfirst{

      color: #002060;
    }

     .Hsecond{
       color: #000000;
    }


    .brandname {
      font-family: 'Edwardian Script';
      font-size: 48px;
    }
    .brandname :first-letter {
     font-size: 72px;

}


/** MENU */

#menu-wrapper
{
    background: #16a085;
    overflow:auto;
}

#menu {
    overflow: hidden;
    height: 100px;
    float:left;
}

#menu ul {
    margin: 0;
    padding: 0px 0px 0px 0px;
    list-style: none;
    line-height: normal;
    text-align: center;
}

#menu li {
    display: inline-block;
}

#menu a {
    display: block;
    letter-spacing: 1px;
    padding: 0px 40px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.80em;
    line-height: 100px;
    border: none;
    color: #FFF;
}

#menu a:hover, #menu .current_page_item a {
    text-decoration: none;
}

#menu .current_page_item a {
    background: #1abc9c;
}

#Logo img{
width:100px;
height:90px;
float: left;
margin-top: 5px;
margin-left:5px;
background: transparent;
z-index:-1;
opacity: 0.6;
}

/** PAGE */

#page
{
    position: relative;
    overflow: hidden;
    padding: 6em 0em 5em 0em;
}

/** CONTENT */

#content
{
    float: left;
    width: 790px;
}

/*********************************************************************************/
/* Sidebar                                                                       */
/*********************************************************************************/

    #sidebar
    {
        float: right;
        width: 345px;
    }

    #sidebar .title h2
    {
        font-size: 1.6em;
    }

    #sidebar .box1
    {
        margin-bottom: 3em;
    }


/*********************************************************************************/
/* Copyright                                                                     */
/*********************************************************************************/

    #copyright
    {
        overflow: hidden;
        padding: 5em 0em;
        text-align: center;
    }

    #copyright p
    {
        letter-spacing: 0.20em;
        text-align: center;
        text-transform: uppercase;
        font-size: 0.80em;
        color: rgba(255,255,255,.5);
    }

    #copyright a
    {
        text-decoration: none;
        color: rgba(255,255,255,.7);
    }

/*********************************************************************************/
/* Welcome                                                                       */
/*********************************************************************************/

    #welcome
    {
        overflow: hidden;
        padding: 5em 0em;
        border-bottom: 1px solid #E5E5E5;
        text-align: center;
    }

    #welcome h2
    {
        letter-spacing: 0.20em;
        text-transform: uppercase;
        font-size: 2.6em;
    }

    #welcome p
    {
        font-size: 1.3em;
    }

    #welcome .byline
    {
        display: block;
        padding: 0em 0em 1.5em 0em;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        font-weight: 400;
        font-size: 1.2em;
        color: #6F6F6F;
    }

/*********************************************************************************/
/* Portfolio                                                                     */
/*********************************************************************************/

    #portfolio-wrapper
    {
        background: rgba(0,0,0,.04);
        padding: 6em 0em;
        color: rgba(255,255,255,.7);
    }

    #portfolio
    {
        overflow: hidden;
    }

    #portfolio .title h2
    {
        font-size: 1.2em;
        color: #FFF;
    }

    #portfolio .byline
    {
        font-size: 1em;
        color: #EEA7C1;
    }

    #column1,
    #column2,
    #column3,
    #column4
    {
        width: 282px;
    }

    #column1,
    #column2
    {
        float: left;
        margin-right: 24px;
    }

    #column3
    {
        float: left;
    }

    #column4
    {
        float: right;
    }

/*********************************************************************************/
/* Button Style                                                                  */
/*********************************************************************************/

    .button
    {
        display: inline-block;
        margin-top: 1.5em;
        padding: 1.50em 3em 1.50em 3em;
        background: #16a085;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 400;
        font-size: 0.90em;
        color: #FFF;
    }

        .button:before
        {
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            border-radius: 20px;
            text-align: center;
            color: #FFF;
        }

/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/

    #footer-wrapper
    {
        overflow: hidden;
        padding: 5em 0em;
        background: #1E1B1A;
    }

    #footer
    {
        color: #ADADAD;
    }

    #footer .title h2
    {
        font-weight: 400;
        font-size: 1.2em;
        color: #FFF;
    }

    #footer .title
    {
        border-color: #2D2926 !important;
    }

    #footer .style1 li
    {
        border-color: #2D2926 !important;
    }

    #footer .style1 a
    {
        font-size:1em;
        color: #B1B1B1;
    }

    #box1
    {
        float: left;
        width: 354px;
        margin-right: 24px;
        padding-right: 30px;
    }

    #box2
    {
        float: left;
        width: 354px;
        margin-left: 24px;
        padding-right: 30px;
    }

    #box3
    {
        float: right;
        width: 344px;
        padding-left: 40px;
    }

Answer 1

这是 p 标签的基本行为。如果你真的想覆盖它，你可以这样做:

p {
    display: inline-block;
}