Question

好吧，对于我网站的标题我是一个小徽标图片，然后我需要通过标题间隔开的两个链接。

如果有两个链接，它可以将它们分开，但是它们会在顶部向上，我无法弄清楚如何降低它们？

<div class="row">
    <div class="header">
    <img src="assets/caliweb.png" alt="CALi Logo"> 
      </div>
      <p><a href="#">Patents Pending</a></p>
      <p><a href="#">Partner with Us</a></p>
  </div>

CSS

.header p {
    display: inline;
    padding-top: 5%;
    padding-left: 10%;
    padding-right: 10%;

}

.header img{
    float: left;
    padding-top: 
    padding-left: 5%;
    padding-right: 10%;
    display: inline;


}

这是我尝试过的，根本不起作用，链接位于图片下方。

 <div class="row">
        <div class="header">
      <div class="headerlogo">
        <img src="assets/caliweb.png" alt="CALi Logo"> 
          </div>
          <div class="headertext">
          <p><a href="#">Patents Pending</a></p>
          <p><a href="#">Partner with Us</a></p>
      </div>  
    </div>
      </div>

CSS

.header {
display:inline;
}

.headertext {
    display: inline;
    padding-top: 5%;
    padding-left: 10%;
    padding-right: 10%;

}

.headerlogo{
    float: left;
    padding-top: 
    padding-left: 5%;
    padding-right: 10%;
    display: inline;


}

我一直在犯无知/天真的错误，但是所有人都非常乐于帮助我修复它们。我非常感激。

EDIT 我发现了我最近的问题。在重新输入代码的同时，我离开了一个并意外地将文本从.header标签中关闭。现在一切都很好，谢谢。

Answer 1

您需要制作.headertext {display：block;} ...或inline-block

内联元素和填充

虽然填充可以应用于内联元素的所有边，但只有左右填充会对周围内容产生影响。

内联元素和边距

在影响左右边缘的同时，上下的内容不是。

Answer 2

如果您真的想坚持使用html结构，请使用display：inline-block而不是display：inline。

我宁愿用“nav”和“ul”标签包装链接。然后将.header，nav和li浮动到左侧并添加margin-top到nav。

文字内嵌图像上升到图像顶部，填充顶部赢得了工作？

2 个答案: