如何在使用CSS的FLEXBOX时移除我的图标周围的空白空间？

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

How can i remove empty space around my ICON when i using FLEXBOX in CSS?

问题

当我使用flexbox时，如何去掉图标周围的蓝色背景色？

无法将子元素的属性一般化为其父元素。

我没有全局背景颜色。

我在FONTAWSOME.com网站上使用了图标。

  1. * {
  2.     direction: ltr;
  3.     background-color: #55efc4;
  4.     box-sizing: border-box;
  5. }
  7. body {
  8.     font-size: 16px;
  9. }
  11. .container {
  12.     display: flex;
  13.     flex-direction: column;
  14.     background-color: white;
  15.     margin: 150px 500px;
  16. }
  18. .title {
  19.     font-size: 2em;
  20.     color: white;
  21.     background-color: #00b894;
  22.     border: 1px solid white;
  23.     padding: 20px;
  24.     justify-content: center;
  25.     align-items: center;
  26.     text-align: center;
  27. }
  29. .user {
  30.     background-color: white;
  31.     display: flex;
  32.     flex-direction: row;
  33.     justify-content: center;
  34.     align-content: center;
  35.     align-items: center;
  36.     margin: 10px;
  37.     padding: 10px;
  38.     align-self: center;
  39. }
  41. #usericon {
  42.     position: relative;
  43.     align-self: auto;
  44.     padding: 0px;
  45. }
  47. .userid {
  48.     position: relative;
  49.     background-color: white;
  50.     align-self: auto;
  51. }
  53. #idname {
  54.     position: relative;
  55.     align-self: center;
  56.     background-color: white;
  57.     border: none;
  58.     border-bottom: 2px solid #999;
  59.     border-radius: 5px;
  60.     -webkit-border-radius: 5px;
  61.     -moz-border-radius: 5px;
  62.     -ms-border-radius: 5px;
  63.     -o-border-radius: 5px;
  64. }
  66. #idname:focus {
  67.     outline: none;
  68.     border: none;
  69.     border-bottom: 2px solid #00b894;
  70.     -webkit-transition: 3s;
  71. }
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <title>登录</title>
  6.     <meta charset="UTF-8" />
  7.     <script src="https://kit.fontawesome.com/5dd6c7af4c.js" crossorigin="anonymous"></script>
  8.     <link rel="stylesheet" href="./css/main.css">
  9. </head>
  11. <body>
  12.     <div class="container">
  13.         <div class="title">登录表单</div>
  14.         <div class="user">
  15.             <form class="userid" action="">
  16.                 <label id="usericon" for="idname"><i class="fa-solid fa-user"></i></label>
  17.                 <input type="text" name="idname" id="idname">
  18.             </form>
  19.         </div>
  20.         <div></div>
  21.         <div></div>
  22.     </div>
  23. </body>
  25. </html>

我的结果 我不想使用inline-flex。谢谢！

英文:

I'm a beginner, can anyone explain how can i remove that Blue background color around my icon when i'm using flexbox?
i can't generalization my properties for children to their parent.
i haven't no global BG color.
i used FONTAWSOME.com website for icons.
result

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

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

  1. *{
  2. direction: ltr;
  3. background-color: #55efc4;
  4. box-sizing: border-box;
  5. }
  6. body{
  7. font-size: 16px;
  8. }
  9. .container{
  10. display: flex;
  11. flex-direction: column;
  12. background-color: white;
  13. margin: 150px 500px;
  14. }
  15. .title{
  16. font-size: 2em;
  17. color: white;
  18. background-color: #00b894;
  19. border: 1px solid white;
  20. padding: 20px;
  21. justify-content: center;
  22. align-items:center;
  23. text-align: center;
  24. }
  25. .user{
  26. background-color: white;
  27. display: flex;
  28. flex-direction: row;
  29. justify-content: center;
  30. align-content: center;
  31. align-items: center;
  32. margin: 10px;
  33. padding: 10px;
  34. align-self: center;
  35. }
  36. #usericon{
  37. position: relative;
  38. align-self:auto; 
  39. padding: 0px; 
  40. }
  41. .userid{ 
  42. position: relative;
  43. background-color: white;
  44. align-self:auto;
  45. }
  46. #idname{
  47. position: relative;
  48. align-self: center;
  49. background-color: white;
  50. border: none;
  51. border-bottom: 2px solid #999 ;
  52. border-radius: 5px;
  53. -webkit-border-radius: 5px;
  54. -moz-border-radius: 5px;
  55. -ms-border-radius: 5px;
  56. -o-border-radius: 5px;
  57. }
  58. #idname:focus{
  59. outline: none;
  60. border: none;
  61. border-bottom: 2px solid #00b894;
  62. -webkit-transition: 3s;
  63. }

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

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;title&gt;login&lt;/title&gt;
  5. &lt;meta charset=&quot;UTF-8&quot; /&gt;
  6. &lt;script src=&quot;https://kit.fontawesome.com/5dd6c7af4c.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  7. &lt;link rel=&quot;stylesheet&quot; href=&quot;./css/main.css&quot; &gt;
  8. &lt;/head&gt;
  9. &lt;body&gt;
  10. &lt;div class=&quot;container&quot;&gt;
  11. &lt;div class=&quot;title&quot;&gt;LOGIN FORM&lt;/div&gt;
  12. &lt;div class=&quot;user&quot;&gt;
  13. &lt;form class=&quot;userid&quot; action=&quot;&quot;&gt;
  14. &lt;label id=&quot;usericon&quot; for=&quot;idname&quot;&gt;&lt;i class=&quot;fa-solid fa-user&quot;&gt;&lt;/i&gt;&lt;/label&gt;
  15. &lt;input type=&quot;text&quot; name=&quot;idname&quot; id=&quot;idname&quot;&gt;
  16. &lt;/form&gt;
  17. &lt;/div&gt;
  18. &lt;div&gt;&lt;/div&gt;
  19. &lt;div&gt;&lt;/div&gt;
  20. &lt;/div&gt;
  21. &lt;/body&gt;
  22. &lt;/html&gt;

<!-- end snippet -->

my resaulti don't want to using inline-flex. THANKS

答案1

得分: 0

你可以尝试将#usericon{}添加background-color: white。
如果你有*{background-color: "cyan"}，它会使所有元素的背景变为青色，请查看你的CSS文件中是否有这个青色并找出原因。

英文:

you can try adding background-color: white to #usericon{}.
If you have *{background-color: &quot;cyan&quot;} it makes all the elements backgrounds cyan, look in your css where you have that cyan color and find the cause.

huangapple
  • 本文由 发表于 2023年8月10日 22:25:50
  • 转载请务必保留本文链接：https://go.coder-hub.com/76876676.html
  • css
  • flexbox
  • html
  • inheritance
匿名

发表评论

匿名网友

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

确定