边框超出了 div。

huangapple
go评论96阅读模式
英文:

Border goes outside div

问题

  1. 我有一个问题，一个 div 元素超出了父元素 (div.navigation-view)。
  3. index.html

<div class="navigation-view">
<div class="nav-content">

  1. &lt;/div&gt;

</div>

navigation.sass

  1. $nav-bar-height: 50px
  2. $nav-bar-link-color: white
  5. body
  6.     margin: 0
  7.     padding: 0
  8.     
  9. div.navigation-view
  10.     background-color: black
  11.     height: $nav-bar-height
  12.     width: 100vw
  13.     position: fixed
  14.     top: 0
  15.     
  16.     div.nav-content
  17.         display: inline-block
  18.         height: 100%
  19.         max-height: 100% !important
  20.         width: 60%
  21.         border: 1px solid red
  2. 图片：
  4. [图中边框超出另一个 div][1]
  7.   [1]: https://i.stack.imgur.com/t3aMN.png
英文:

I have a problem with a div which goes outside the parent element (div.navigation-view).

index.html

  1. &lt;div class=&quot;navigation-view&quot;&gt;
  2.     &lt;div class=&quot;nav-content&quot;&gt;
  3.         
  4.         
  6.     &lt;/div&gt;
  7. &lt;/div&gt;

navigation.sass

  1. $nav-bar-height: 50px
  2. $nav-bar-link-color: white
  5. body
  6.     margin: 0
  7.     padding: 0
  8.     
  9. div.navigation-view
  10.     background-color: black
  11.     height: $nav-bar-height
  12.     width: 100vw
  13.     position: fixed
  14.     top: 0
  15.     
  16.     div.nav-content
  17.         display: inline-block
  18.         height: 100%
  19.         max-height: 100% !important
  20.         width: 60%
  21.         border: 1px solid red

Image:

Image with border going outside the other div

答案1

得分: 1

box-sizing: border-box 加入到你的样式中：

navigation.sass

  1. *
  2.     box-sizing: border-box
英文:

Add box-sizing: border-box to your styles:

navigation.sass

  1. *
  2.     box-sizing: border-box

huangapple
  • 本文由 发表于 2023年4月4日 03:09:37
  • 转载请务必保留本文链接：https://go.coder-hub.com/75922980.html
  • css
  • html
  • sass
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定