如何將固定高度和寬度設置為div

Question

我查看了很多已經提出的問題，找不到適合我的答案。 我正在嘗試制作一個在中間帶有＆符號的徽標。 “＆”號應該每隔幾秒鍾就更改字體系列，這是可行的。 唯一的問題是，現在更改字體時，它會使who頁面混亂。

https://codepen.io/anon/pen/BVddWV

主要問題來自CSS的第21行

.ampersand{
  display:inline;
  width:35px;
  max-width:35px;
  height:79px;
  max-height: 79px;
  font-family:"Exo", sans-serif;
}

有任何想法嗎？

Answer 1

在<b>標記上添加了display：flex選項，並刪除了＆符號樣式，使其成為了span而不是div，並向其添加了line-height: 1 。

.ampersand {
  line-height: 1;
  display: inline-block;
  width: 60px;
  transition: all 1s;
}

<b display: flex;>Flo<span class="ampersand">&</span>Behold</b>

 $(document).ready(function() { var fonts = ['Dosis', 'Exo', 'Gloria Hallelujah', 'PT Sans', 'PT Serif', 'Yaanone Kaffeesatz']; var counter = 0; var inst = setInterval(change, 2000); function change() { if (counter > fonts.length) { counter = 0; } font_selection = fonts[counter]; $('.ampersand').css("font-family", font_selection); counter++; } }); 

 @import url('https://fonts.googleapis.com/css?family=Quicksand'); @import url('https://fonts.googleapis.com/css?family=Molengo'); @import url('https://fonts.googleapis.com/css?family=Dosis|Exo|Gloria+Hallelujah|PT+Sans|PT+Serif|Yanone+Kaffeesatz'); * { font-family: "Gill Sans", sans-serif; margin: 0px; padding: 0px; } body { background-color: #f5f6fa; } #header { width: 100%; padding: 4% 0px 20px 0px; } .logo_text { font-family: "Molengo", sans-serif; font-size: 70px; color: #333; } .ampersand { line-height: 1; display: inline-block; width: 60px; transition: all 1s; } .nav { width: 100%; padding: 25px 0px 25px 0px; } .nav>ul { padding-top: 15px; } .nav>ul>a { text-decoration: none; color: #333; } .nav>ul>a>li { color: #333; font-size: 25px; padding: 20px 30px 20px 30px; display: inline; transition: border 0.1s linear; border: 3px solid #f5f6fa; } .nav>ul>a>li:hover { border: 3px solid #333; } #body { padding-top: 35px; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrapper" align="center"> <div id="header"> <div class="logo"> <span class="logo_text"><b display: flex;>Flo<span class="ampersand">&</span>Behold</b> </span> </div> <div class="nav"> <ul> <a href="#"> <li>Home</li> </a> <a href="#"> <li>About</li> </a> <a href="#"> <li>Music</li> </a> <a href="#"> <li>Media</li> </a> <a href="#"> <li>Contact</li> </a> </ul> </div> </div> <div id="body"></div> </div> 

Answer 2

您無法為內聯元素設置固定的高度。

並且您需要切換到display:inline-block或display:block來將元素轉換為block elements 。

還請注意，默認情況下，某些元素（例如<span>或<i>是內聯的，而某些元素（例如<span> <div>和<p>是block的 ，但是您仍然可以通過CSS display規則覆蓋該行為（默認）。

你的情況（我假設你想防止您的標志文本，當符號改變字體的跳躍），我建議兩兩件事：

1. 將固定高度設置為.logo_text ，可以添加display:block和max-height: 84px ；
2. 將ampersand設置為span而不是div以使您的HTML標記在語義上更加相關；