剪切 HTML 中的边框

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

Cut borders in html

问题

我正在尝试创建一个小容器来显示一些消息，但如您在示例中所见，它在两侧被裁切了。

我的HTML和CSS如下：

  1. .mensajes{
  2.     position: absolute;
  3.     max-height: 7%;
  4.     width: 40%;
  5.     margin-left: 12%;
  6.     padding: 0.25%;
  7.     z-index: 2;
  8.     overflow: auto;
  9.     display: grid;
  10.     align-items: center;
  11.     justify-items: center;
  12.     background-color: #111111a6;
  13.     border-radius: 0 0 5px 5px;
  14. }
  16. .mensaje{
  17.     position: relative;
  18.     width: 95%;
  19.     padding: 5px;
  20.     margin-top:2%;
  21.     margin-bottom: 2%;
  22.     height: fit-content;
  23.     background-color: #9a9999bc;
  24.     border-radius: 5px;
  25. }
  1. <div id="mapa" class="mapa">
  2.   <div class="mensajes" id="mensajes"></div>
  3.   <div class="coordenadas">
  4.     <b id="latitud" style="color: blue;"></b><br>
  5.     <b id="longitud" style="color: red;"></b>
  6.   </div>
  7. </div>
  8. <script>
  9.   msgsBox = document.getElementById("mensajes")
  10.   mensaje = document.createElement("div")
  11.   mensaje.classList.add("mensaje")
  12.   mensaje.textContent= "未检测到GPS，请检查您的连接"
  13.   mensaje.style.backgroundColor = "#FF5733B3"
  14.   mensaje.style.color = "#E8E8E8"
  15.   msgsBox.appendChild(mensaje)
  16.   msgsBox.scrollTop = msgsBox.scrollHeight
  17. </script>

在HTML中，“mapa”使用display:flex并占据屏幕左半部分。

编辑：

根据评论中的建议更新了代码，感谢大家，现在它可以正常工作。

英文:

I am trying to make a little container to show some messages but it gets cut on the sides as you can see on the example.

My HTML and CSS are this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .mensajes{
  2.     position: absolute;
  3.     max-height: 7%;
  4.     width: 40%;
  5.     margin-left: 12%;
  6.     padding: 0.25%;
  7.     z-index: 2;
  8.     overflow: auto;
  9.     display: grid;
  10.     align-items: center;
  11.     justify-items: center;
  12.     background-color: #111111a6;
  13.     border-radius: 0 0 5px 5px;
  14. }
  16. .mensaje{
  17.     position: relative;
  18.     width: 95%;
  19.     padding: 5px;
  20.     margin-top:2%;
  21.     margin-bottom: 2%;
  22.     height: fit-content;
  23.     background-color: #9a9999bc;
  24.     border-radius: 5px;
  25. }

<!-- language: lang-html -->

  1. &lt;div id=&quot;mapa&quot; class=&quot;mapa&quot;&gt;
  2.   &lt;div class=&quot;mensajes&quot; id=&quot;mensajes&quot;&gt;&lt;/div&gt;
  3.   &lt;div class=&quot;coordenadas&quot;&gt;
  4.     &lt;b id=&quot;latitud&quot; style=&quot;color: blue;&quot;&gt;&lt;/b&gt;&lt;br&gt;
  5.     &lt;b id=&quot;longitud&quot; style=&quot;color: red;&quot;&gt;&lt;/b&gt;
  6.   &lt;/div&gt;
  7. &lt;/div&gt;
  8. &lt;script&gt;
  9.   msgsBox = document.getElementById(&quot;mensajes&quot;)
  10.   mensaje = document.createElement(&quot;div&quot;)
  11.   mensaje.classList.add(&quot;mensaje&quot;)
  12.   mensaje.textContent= &quot;No GPS detected, check your connection&quot;
  13.   mensaje.style.backgroundColor = &quot;#FF5733B3&quot;
  14.   mensaje.style.color = &quot;#E8E8E8&quot;
  15.   msgsBox.appendChild(mensaje)
  16.   msgsBox.scrollTop = msgsBox.scrollHeight
  17. &lt;/script&gt;

<!-- end snippet -->

In the HTML "mapa" uses display:flex and ocupies the left half of the screen.

EDIT:

Updated the code to include the suggestions given in the comments, thanks to all, it works now.

答案1

得分: 0

在.mensajes上使用内部填充。您总是希望在文本的左右两侧添加大约33%的额外填充，以便均匀地框定它。

  1. .mensajes {
  2.   width: 40%;
  3.   margin-left: 12%;
  4.   padding: 0.5em 1.5em; /* 添加内部填充，左右比上下多33% */
  5.   
  6.   display: flex;
  7.   align-items: center;
  8.   justify-content: center;
  9.   
  10.   background-color: #111111a6;
  11.   
  12.   border-radius: 0 10px 10px;
  13. }

请注意，我已经在 .mensajes 类的 padding 属性中添加了内部填充的更改，使左右填充比上下填充多了33%。

英文:

Use inner padding on .mensajes. You always want to add about 33% more padding to the left and right of text compared to the top, in order to frame it evenly.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .mensajes 
  2. {
  3.   width: 40%;
  4.   margin-left: 12%;
  5.   padding: 0.5em;
  6.   
  7.   display: flex;
  8.   align-items: center;
  9.   justify-content: center;
  10.   
  11.   background-color: #111111a6;
  12.   
  13.   border-radius: 0 10px 10px;
  14. }
  16. .mensaje 
  17. {
  18.   width: 95%;
  19.   padding: 6px 8px;
  21.   background-color: maroon;
  22.   color: #fff;
  23.   
  24.   border-radius: 5%;
  25. }

<!-- language: lang-html -->

  1. &lt;div id=&quot;mapa&quot; class=&quot;mapa&quot;&gt;
  2.   &lt;div class=&quot;mensajes&quot; id=&quot;mensajes&quot;&gt;
  3.     &lt;div class=&quot;mensaje&quot;&gt;
  4.       The text goes here
  5.     &lt;/div&gt;  
  6.     &lt;/div&gt;
  7.   &lt;div class=&quot;coordenadas&quot;&gt;
  8.     &lt;b id=&quot;latitud&quot; style=&quot;color: blue;&quot;&gt;&lt;/b&gt;&lt;br&gt;
  9.     &lt;b id=&quot;longitud&quot; style=&quot;color: red;&quot;&gt;&lt;/b&gt;
  10.   &lt;/div&gt;
  11. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月8日 17:55:36
  • 转载请务必保留本文链接：https://go.coder-hub.com/76430665.html
  • css
  • html
匿名

发表评论

匿名网友

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

确定