如何在标题的右上角定位网站标题和标语？
如何在标题的右上角定位网站标题和标语？
提问于 2014-01-16 22:14:03
我在用Wordpress和他们的十三个主题。有了这个主题，我想定位和对齐站点标题和标签线文本到标题的右上角。当我试图这样做，它总是定位在我的标志下，出于某种原因。我玩的位置CSS属性没有运气，它仍然定位在徽标下。
CSS文件的示例
.site-title {
font-size: 30px;
line-height: 0.5;
padding: 5px 0 10px;
text-align:right;
position: relative;
}
.site-description {
font: 300 italic 18px "Source Sans Pro", Helvetica, sans-serif;
text-align:right;
}
.site-header {
margin:10px auto 0 auto;
max-width:980px;
padding:0;
background-color:#ffffff;
background-size: 980px auto;
border-top:2px solid #efefef;
border-bottom:1px solid #cdcdcd;
box-shadow: 0 3px 3px #dedede;
-moz-box-shadow: 0 3px 3px #dedede;
-webkit-box-shadow: 0 3px 3px #dedede;
-o-box-shadow: 0 3px 3px #dedede;
}
.site-header .site-title:hover {
text-decoration: none;
}
.site-header .home-link {
min-height: 50px;
}
.header-logo {
max-width:60%;
display:block;
padding-top:3px;
position:relative;
}这是我的测试网站，您可以确切地看到我在说什么:mywptestsite.is-about.
我在这里错过了什么？提前谢谢你，金
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-01-16 22:39:41
问题在于，您正在将站点标题封装在一个h1标记中，因此它将其定位在一个新行中。
您可以通过将徽标和站点标题放在同一个<div>元素中，并将float: left;添加到标头-徽标类中，并将float: right;添加到站点标题类中，从而解决此问题。
Stack Overflow用户
发布于 2014-01-16 22:32:51
您可以尝试这样做--将以下几行添加到title和tagline类：
.site-title {
position:absolute;
top:20px;
right:20px;
}
.site-description {
position:absolute;
top:50px;
right:110px;
}当然，你可以改变最高值和正确值来获得理想的职位.
Stack Overflow用户
发布于 2014-01-16 22:33:31
您可以在图像、标题和描述上使用float将这两个元素放在右边。您还需要使用清除技术 on .home-link来使元素环绕所有浮动元素。
CSS
.header-logo { float: left; }
.site-title{ float: right; clear: none; }
.site-description { clear: right; }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21174027
复制相关文章
相似问题
腾讯云开发者
