0

我在 h1 标签中有一个句子。在调整大小时，我希望最后三个词一起跳下来，而不是一次一个，因为最后三个词是标语，如果它们分开就没有意义。这里是现场直播。

这是HTML：

<header class="header" role="banner">
    <div id="inner-header" class="wrap clearfix">
       <div id="title">
       <!-- to use a image just replace the bloginfo('name') with your img src and remove the surrounding <p> -->
        <h1 id="logo" class="h1">
                <a href="<?php echo home_url(); ?>" rel="nofollow">
                    <?php bloginfo('name'); ?><span class="subtitle">
                    <?php bloginfo('description'); ?></span>
                </a>
            </h1>
       </div>
    <nav role="navigation">
       <?php bones_main_nav(); ?>
    </nav>
</div> <!-- end #inner-header -->

和scss：

.header {
    #title {
        @include span-columns(23 ,24); 
        position: absolute; 
        top: 30px;
        text-align: center;
    }
    .subtitle {
        font-size: 0.3em; 
        margin-left: 1em;
    }
    .nav { 
        @include span-columns(24 omega ,24); 
        margin-top: 289px;
    }
    #logo {
        a { 
           color: #fff; 
           font-family: 'Pacifico', cursive; /*font-size: 2.5em;*/ 
           text-shadow: 0px 0px 0 #B6CEBF,
                        0.707px 0.707px 0 #B6CEBF,
                        1.414px 1.414px 0 #B6CEBF, 
                        2.121px 2.121px 0 #B6CEBF, 
                        2.828px 2.828px 0 #B6CEBF, 
                        3.536px 3.536px 0 #B6CEBF, 
                        4.243px 4.243px 0 #B6CEBF, 
                        4.95px 4.95px 0 #B6CEBF, 
                        5.657px 5.657px 0 #B6CEBF, 
                        6.364px 6.364px 0 #B6CEBF, 
                        7.071px 7.071px 0 #B6CEBF;
        }
    }
}
4

2 回答 2

2

试试这个：

.subtitle {
    display: inline-block;
    font-size: 0.3em; 
    margin-left: 1em;
}

设置displaytoinline-block将使元素的内容保持在一起（元素的行为block），但仍保持与其他文本内联。

您还应该考虑进行一些其他调整，以便标题可以是 100% 宽度，并且导航仍然可以正确定位：

#logo {
    margin: 80px 0 0;
}
.header #title {
    height: 289px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
}
.header .nav {
    display: inline;
    float: right;
    width: 100%;
}
.header .nav ul {
    /* Add the .clearfix class to this ul */
}
于 2013-01-22T05:14:37.677 回答
0

我们在这里讨论的是响应@media式查询。有几种方法可以做到这一点，但这是最快的：

将此规则添加到您的 scss：

@media only screen and (max-width: 768px) {
    .subtitle{
        display: block;
    }
}

在旁边

Bones 附带其他 scss 文件，可编辑_base.scss一般样式，但对于调整大小编辑文件（如 ）的自定义样式_768up.scss，还请阅读style.scss文件内的信息以获取有关媒体查询的更多信息。Bones 附带了一个很棒的文档。

进一步阅读

于 2013-01-22T07:16:19.170 回答