Question

我在Wordpress网站上有一个网站标题，可以悬停一些CSS代码。问题是标题没有统一缩放，而是左移。怎么解决这个问题？

HTML代码：

<div class="site-branding" style="margin-bottom: 58px;">
    <div class="wrap">
        <div class="site-branding-text">
            <h1 class="site-title"><a href="http://dev.infopsi.md/" rel="home">InfoPsi.md</a></h1>
            <p class="site-description">Portalul comunității psihologice din Republica Moldova</p>
        </div><!-- .site-branding-text -->
    </div><!-- .wrap -->
</div>

CSS：

.site-title {
    font-size: 1.5rem;
    text-transform: initial;
    margin-top: 5px;
    font-family: cursive;
    font-weight: initial;
    line-height: initial;
    letter-spacing: initial;
    text-shadow: 1px 1px 0 #CCC, 2px 2px 0 #CCC, 3px 3px 0 #444, 4px 4px 0 #444, 5px 5px 0 #444, 6px 6px 0 #444;
}
.site-title:hover {
    /* CSS3 Transform Effect */
    -webkit-transform: scale(1.1);     /* Safari & Chrome */
    -moz-transform: scale(1.1);        /* Firefox */
    -o-transform: scale(1.1);          /* Opera */
}
.site-title a {
    color: red;
}

查看一个工作示例： https://jsfiddle.net/iuriemalai/o4r8xegu/5/

Answer 1

添加

display:inline-block

到您的.site-title CSS规则

使用CSS

1 个答案: