问题

I noticed that you want to make changes to the footer-info and socials section of your code. Specifically, you mentioned that the size of the anchor <a> elements for the socials is causing an issue. If you change the size from 18 x 133 to 18 x 18 by modifying the .social a style class, it affects the positioning of the icons. If you need assistance with this issue, please let me know.

英文:

I'm trying to get the footer-info and socials closer together. I noticed that part of the issue is that the on the anchor <a> for the socials, its size is 18 x 133 for some reason, and when I change it to 18 x 18 by changing the .social a style class it pushes the icons to this white bit of the website. Any help would be appreciated.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Oxygen, Ubuntu, Cantarell, &#39;Open Sans&#39;, &#39;Helvetica Neue&#39;, sans-serif;
}

.top-container{
    padding: 200px;
}

.showcase {
    background-color: rgb(39,43,51);
    width: max-content;

}

.showcase-inner {
    margin: 0;
    padding-top: 30px;
    padding-bottom: 30px;
}

.footer { 
    background-color: rgb(32,35,41);
    font-size: 100px;
    padding-top: 30px;
}

h1{
    font-size: 95px;
    text-align: center;
    font-weight: 1000;
    color: rgb(32,35,41);
}


main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    overflow-x: hidden;
}

.image-container{
    display: flex;
}

.image-container img{
    width: 229.2px;
    height: 220px;
    border-radius: 25px;
}

article{
    padding: 10px;
}

.character-card{
    display: flex;
    margin: 13.5px;
    background-color: rgb(60,62,68);
    border-radius: 25px;
    box-shadow: 0 0 10px rgba(37, 37, 37, 0.5);
}

.character-info{
    display: flex;
    flex-direction: column;
    padding: 13.5px;
    position: relative;
}

.section{
    display: flex;
    flex-direction: column;
    width: 330px;
    height: 64.33px;
    color: rgb(245,245,245);
}

.greytext{
    color: rgb(158,158,158);
}

.navbar {
    background-color: #ffffff;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}

.navbar li {
    float: left;
}

.navbar li a {
    display: block;
    color: #333;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: color 0.2s;
}

.content-links{
    margin-left: auto;
    padding: 10px;
    margin-right: 10px;
    font-size: 20px;
    font-weight: 750;
}

.content-links a:hover{
    color: rgb(255,152,0);
}

.homebutton{
    margin-right: auto;
}

.homebutton img{
    width: 50px;
    height: 50px;
}

.status {
    display: flex;
    align-items: center;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}
  
.status-dot.grey {
    background-color: rgb(158,158,158);
}
  
.status-dot.red {
    background-color: rgb(214,61,46);
}
  
.status-dot.green {
    background-color: rgb(85,204,68);
}
  
.about-content{
    display: flex;
    flex-direction: column;
    padding: 5px;
    margin-left: 500px;
    margin-right: 500px;
    font-size: 110%;
    color: rgb(66,66,66);
}

.abouth2 {
    font-size: 35px;
    font-weight: 800;
    margin-bottom: 30px;
    color: rgb(32,35,41);
}

.abouth3 {
    font-size: 25px;
    font-weight: 800;
    margin-top: 10px;
    margin-bottom: 10px;
    color: rgb(32,35,41);
}

.ablink {
    text-decoration-color: rgb(255,152,0);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    color: rgb(66,66,66);
}

.ablink:hover {
    text-decoration: none;
    color: rgb(255,152,0);
    transition: color 0.2s;
}

.footer-info {
    display: flex;
    justify-content: center;
    list-style: none;
    padding-top: 40px;
    margin: 0;
    font-size: 15px;
    font-weight: 750;
    color: rgb(158, 158, 158);
}

.footer-info li {
    margin-right: 20px;
}

.socials {
    display: flex;
    justify-content: center;
    align-items: center;
}

.socials a {
    margin: 10px;
}

.socials a:hover svg path {
    fill: rgb(255, 152, 0);
}

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
        &lt;title&gt;Rick and Morty API&lt;/title&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;ul class=&quot;navbar&quot;&gt;
            &lt;li class=&quot;homebutton&quot;&gt;&lt;a href=&quot;landing.html&quot;&gt;&lt;img src=&quot;RMAPI-homepagebutton.png&quot; alt=&quot;Home&quot;&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;content-links&quot;&gt;&lt;a href=&quot;about.html&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class=&quot;top-container&quot;&gt;
            &lt;h1&gt;The Rick and Morty API&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class=&quot;showcase&quot;&gt;
            &lt;div class=&quot;showcase-inner&quot;&gt;
                &lt;main&gt;&lt;/main&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;footer&quot;&gt;
            &lt;ul class=&quot;footer-info&quot;&gt;
                &lt;li&gt;CHARACTERS: 826&lt;/li&gt;
                &lt;li&gt;LOCATIONS: 126&lt;/li&gt;
                &lt;li&gt;EPISODES: 51&lt;/li&gt;
            &lt;/ul&gt;
            
              &lt;div class=&quot;socials&quot;&gt;
                &lt;a href=&quot;https://github.com/afuh/rick-and-morty-api&quot;&gt;
                  &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; class=&quot;social-icon&quot; style=&quot;fill: rgb(158, 158, 158);&quot;&gt;
                    &lt;path d=&quot;M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z&quot;/&gt;
                  &lt;/svg&gt;
                &lt;/a&gt;
              
                &lt;a href=&quot;https://twitter.com/rickandmortyapi&quot;&gt;
                  &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; class=&quot;social-icon&quot; style=&quot;fill: rgb(158, 158, 158);&quot;&gt;
                    &lt;path d=&quot;M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z&quot;/&gt;
                  &lt;/svg&gt;
                &lt;/a&gt;
              
                &lt;a href=&quot;https://rickandmortyapi.com/support-us/&quot;&gt;
                  &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; class=&quot;social-icon&quot; style=&quot;fill: rgb(158, 158, 158);&quot;&gt;
                    &lt;path d=&quot;M12 4.419c-2.826-5.695-11.999-4.064-11.999 3.27 0 7.27 9.903 10.938 11.999 15.311 2.096-4.373 12-8.041 12-15.311 0-7.327-9.17-8.972-12-3.27z&quot;/&gt;
                  &lt;/svg&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              
        &lt;/div&gt;
        &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;

答案1

得分: 0

/* Chinese translation starts here */
/* 翻译开始 */
/* It looks like the elements in `.socials a` take up too much space on top. If you use `display:flex` it shrinks down to its correct size. */
/* 看起来 `.socials a` 中的元素在顶部占用了太多空间。如果使用 `display:flex`，它将缩小到正确的大小。 */

/* I also left the border colors in my text snippet. This is often a helpful way (other than the dev tools) to find the culprit. */
/* 我还在我的文本片段中保留了边框颜色。这通常是一个有用的方法（除了开发工具之外）来找出问题所在。 */

/* Three more things: 
Be aware of the fact that the padding style of the footer is inherited by its children. I was not sure if you wanted that. */
/* 还有三件事：
请注意页脚的填充样式会被其子元素继承。我不确定你是否想要这样。 */

/* I also changed the footer with `display:flex` and `flex-direction: column`. */
/* 我还使用了 `display:flex` 和 `flex-direction: column` 更改了页脚。 */

/* Next time it can be helpful if you post a minimal reproducible example. Then it's easier to find the solution. */
/* 下次如果您提供一个最小可复现的示例会很有帮助。这样可以更容易找到解决方案。 */

英文:

It looks like the elements in .socials a take up too much space on top. If you use display:flex it shrinks down to its correct size.

I also left the border colors in my text snippet. This is often a helpful way (other thean the dev tools) to find the culprit.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Oxygen, Ubuntu, Cantarell, &#39;Open Sans&#39;, &#39;Helvetica Neue&#39;, sans-serif;
}

.top-container{
    padding: 200px;
}

.showcase {
    background-color: rgb(39,43,51);
    width: max-content;

}

.showcase-inner {
    margin: 0;
    padding-top: 30px;
    padding-bottom: 30px;
}

.footer { 
    background-color: rgb(32,35,41);
    font-size: 100px;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    border: blue solid;
}

h1{
    font-size: 95px;
    text-align: center;
    font-weight: 1000;
    color: rgb(32,35,41);
}


main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    overflow-x: hidden;
}

.image-container{
    display: flex;
}

.image-container img{
    width: 229.2px;
    height: 220px;
    border-radius: 25px;
}

article{
    padding: 10px;
}

.character-card{
    display: flex;
    margin: 13.5px;
    background-color: rgb(60,62,68);
    border-radius: 25px;
    box-shadow: 0 0 10px rgba(37, 37, 37, 0.5);
}

.character-info{
    display: flex;
    flex-direction: column;
    padding: 13.5px;
    position: relative;
}

.section{
    display: flex;
    flex-direction: column;
    width: 330px;
    height: 64.33px;
    color: rgb(245,245,245);
}

.greytext{
    color: rgb(158,158,158);
}

.navbar {
    background-color: #ffffff;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}

.navbar li {
    float: left;
}

.navbar li a {
    display: block;
    color: #333;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: color 0.2s;
}

.content-links{
    margin-left: auto;
    padding: 10px;
    margin-right: 10px;
    font-size: 20px;
    font-weight: 750;
}

.content-links a:hover{
    color: rgb(255,152,0);
}

.homebutton{
    margin-right: auto;
}

.homebutton img{
    width: 50px;
    height: 50px;
}

.status {
    display: flex;
    align-items: center;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}
  
.status-dot.grey {
    background-color: rgb(158,158,158);
}
  
.status-dot.red {
    background-color: rgb(214,61,46);
}
  
.status-dot.green {
    background-color: rgb(85,204,68);
}
  
.about-content{
    display: flex;
    flex-direction: column;
    padding: 5px;
    margin-left: 500px;
    margin-right: 500px;
    font-size: 110%;
    color: rgb(66,66,66);
}

.abouth2 {
    font-size: 35px;
    font-weight: 800;
    margin-bottom: 30px;
    color: rgb(32,35,41);
}

.abouth3 {
    font-size: 25px;
    font-weight: 800;
    margin-top: 10px;
    margin-bottom: 10px;
    color: rgb(32,35,41);
}

.ablink {
    text-decoration-color: rgb(255,152,0);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    color: rgb(66,66,66);
}

.ablink:hover {
    text-decoration: none;
    color: rgb(255,152,0);
    transition: color 0.2s;
}

.footer-info {
    display: flex;
    justify-content: center;
    list-style: none;
    padding-top: 40px;
    margin: 0;
    font-size: 15px;
    font-weight: 750;
    color: rgb(158, 158, 158);
    border: red solid;
    padding-top: 0px;
}

.footer-info li {
    margin-right: 20px;
}

.socials {
    display: flex;
    padding-top: 0px;
    justify-content: center;
    align-items: center;
    border: yellow solid;
}

.socials a {
    display: flex;
    margin: 10px;
    border: green solid;
}

.socials a:hover svg path {
    fill: rgb(255, 152, 0);
}

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
        &lt;title&gt;Rick and Morty API&lt;/title&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;ul class=&quot;navbar&quot;&gt;
            &lt;li class=&quot;homebutton&quot;&gt;&lt;a href=&quot;landing.html&quot;&gt;&lt;img src=&quot;RMAPI-homepagebutton.png&quot; alt=&quot;Home&quot;&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;content-links&quot;&gt;&lt;a href=&quot;about.html&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class=&quot;top-container&quot;&gt;
            &lt;h1&gt;The Rick and Morty API&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class=&quot;showcase&quot;&gt;
            &lt;div class=&quot;showcase-inner&quot;&gt;
                &lt;main&gt;&lt;/main&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;footer&quot;&gt;
            &lt;ul class=&quot;footer-info&quot;&gt;
                &lt;li&gt;CHARACTERS: 826&lt;/li&gt;
                &lt;li&gt;LOCATIONS: 126&lt;/li&gt;
                &lt;li&gt;EPISODES: 51&lt;/li&gt;
            &lt;/ul&gt;
            
              &lt;div class=&quot;socials&quot;&gt;
                &lt;a href=&quot;https://github.com/afuh/rick-and-morty-api&quot;&gt;
                  &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; class=&quot;social-icon&quot; style=&quot;fill: rgb(158, 158, 158);&quot;&gt;
                    &lt;path d=&quot;M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z&quot;/&gt;
                  &lt;/svg&gt;
                &lt;/a&gt;
              
                &lt;a href=&quot;https://twitter.com/rickandmortyapi&quot;&gt;
                  &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; class=&quot;social-icon&quot; style=&quot;fill: rgb(158, 158, 158);&quot;&gt;
                    &lt;path d=&quot;M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z&quot;/&gt;
                  &lt;/svg&gt;
                &lt;/a&gt;
              
                &lt;a href=&quot;https://rickandmortyapi.com/support-us/&quot;&gt;
                  &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; class=&quot;social-icon&quot; style=&quot;fill: rgb(158, 158, 158);&quot;&gt;
                    &lt;path d=&quot;M12 4.419c-2.826-5.695-11.999-4.064-11.999 3.27 0 7.27 9.903 10.938 11.999 15.311 2.096-4.373 12-8.041 12-15.311 0-7.327-9.17-8.972-12-3.27z&quot;/&gt;
                  &lt;/svg&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              
        &lt;/div&gt;
        &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;

Three more things:
Be aware of the fact that the padding style of the footer is inherited by its children. I was not sure if you wanted that.
I also changed the footer with display:flex and flex-direction: column.
Next time it can be helpful if you post a minimal reproducible example. Then its easier to find the solution.

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何将我的两个元素靠得更近？

问题

答案1

可以使用 querySelector 查找具有不确定状态设置的 HTML 输入吗？

React ref callbacks在使用`useCallback`钩子时会有不同的行为吗？

如何创建一个有效的HTML以实现所描述的样式？

如何在JavaScript中将渐变添加到canvas的strokeStyle？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论