這篇“CSS怎么解決inline-block的錯位問題”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“CSS怎么解決inline-block的錯位問題”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。
廢話不多說 帖代碼
html部分
<div class="positionleft">我是position方式的左邊，占30%</div> <div class="positionright">我是position方式的右邊，占70%</div>
css部分
.positionleft {
position: relative;
display: inline-block;
background-color: #8d8d8d;
width: 30%;
height: 20%;
}
.positionright {
position: relative;
display: inline-block;
left: 0;
background-color: #ff8888;
width: 70%;
height: 20%;
}顯示效果
可以很明顯的發現兩個div塊出現了錯位，查閱資料發現是兩個inline-block在中間有空格時會出現這樣的現象
修改html代碼如下
<div class="positionleft">我是position方式的左邊，占30%</div> <div class="positionright">我是position方式的右邊，占70% </div>
僅僅是刪除了兩個div之間的空格 我們查看一下效果
顯示效果
問題解決
各位在使用文檔格式化工具如prettier時出現這種問題要注意
以上是“CSS怎么解決inline-block的錯位問題”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
