Question

主要问题是我的徽标位于标题旁边，带有负边距，当用户填写用户名并继续跳转徽标时，可能是因为文字插入了段落中。但我找不到解决方案来解决这个问题。

HTML：

＆＃13;

#logo{
  display: flex; 
  flex-flow: row; 
  margin-top: -2.9rem;
  margin-left: 11rem;
  -ms-transform: rotate(-15deg); /* IE 9 */
  -webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
  transform: rotate(-15deg);
  justify-content: space-between;
  float: left;
  vertical-align: top;
  position:absolute;
}

#logo>img{
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

＆＃13;

<header>
  <div id="hoofding">
      <div id="titel">
          <h1>Sudoku</h1>
      </div>

      <div id="home" >
          <div id="Welkom">
              <p id="afmeldennaam" class="hidden"></p>
          </div>
          <a id="afmelden" class="hidden">Logout</a>
      </div>
  </div>
  <nav class="hidden" id="navigatie">
      <ul>
          <!--<li><a href="#" id="home">Home</a></li>-->
          <li><a href="#" id="sudokus" class="navigatie">Sudoku</a></li>
          <li><a href="#" id="highscore" class="navigatie">Highscores</a></li>
      </ul>
  </nav>
</header>
<div id="logo">
    <img src="assets/media/logo.png" alt="logo" class="visible-lg"> 
</div>

＆＃13;

Answer 1

您应该将徽标/图像放在与标题相同的包含元素（#hoofding）中。然后使用相对定位将其定位在元素之外。

这是一个人为的例子。

function locate( selector, base ) {
  base = base && 1 === base.nodeType ? base : document;
  return base.querySelector( selector );
}

var btn  = locate( 'button' ),
    hb   = locate( '.header-bottom' ),
    user = locate( '.user' );

btn.addEventListener( 'click', function ( e ) {
  hb.classList.toggle( 'hide' );
  user.classList.toggle( 'hide' );
} );

body {
  margin: 0;
}
header {
}
.header-top,
.header-bottom {
  display: flex;
  height: 75px;
  align-items: center;
}
.header-top {
  padding: 0 1rem;
  color: white;
  background-color: black;
}
.header-top a {
  color: white;
}
.user {
  flex-grow: 1;
  text-align: right;
}
.header-bottom {
  justify-content: center;
}
.hb-item {
  margin: 0 1rem;
  padding: 0.5rem 1rem;
  color: white;
  background-color: teal;
  border-radius: 0.25rem;
}
h1 {
  margin: 0;
  color: teal;
}
.logo {
  display: block;
  transform: rotate( -13deg );
  position: relative;
  top: 25px;
  left: 15px;
}
.hide {
  display: none;
}

<header>
  <div class="header-top">
    <h1>Sudoku</h1>
    <img class="logo" src="http://placehold.it/100x100/fc0">
    <div class="user hide">
      <span>Welcome User!</span><a href="#">Logout</a>
    </div>
  </div>
  <div class="header-bottom hide">
    <div class="hb-item">One</div>
    <div class="hb-item">Two</div>
  </div>
</header>
<main>
  <button>Click Me!</button>
</main>

Answer 2

如果您将徽标放入标题div中，那么它将起作用，您只需调整边距和填充。

例如：的 HTML

<nav> <div class="brand"> <h3>LogoName</h3> <img src="https://cdn0.iconfinder.com/data/icons/20-flat-icons/128/crest.png" alt=""> </div> </nav>

<强> CSS

nav{ background-color: black; height: 50px; } .brand{ position: relative; } .brand h3{ display: inline; color: white; }

https://jsfiddle.net/q24L6ct4/2/

Answer 3

使用id='logo'内的id="hoofding" 将id='logo'放在id="titel"之后 id='logo'不需要弹性属性 id='logo'不需要float属性 id='logo'不需要flex-flow属性在img标记中使用转换：rotate(-15deg);，而不是id='logo' 从id='logo'删除左侧和顶部的边距。
您可以在img标记中使用约margin-top: 15px;。

当js脚本在段落

3 个答案: