文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >当我使用“最大宽度:适合内容”时，我的链接左对齐。

问当我使用“最大宽度:适合内容”时，我的链接左对齐。
EN

Stack Overflow用户
提问于 2022-03-21 15:39:50
回答 3查看 62关注 0票数 1

当我试图集中我的链接，他们只是对左。我已经有两次这个问题了，我找不到对我有用的东西。当我使用flex时，按钮被拉伸到div上，所以我调整宽度以适应内容，它们向左对齐。我该如何将链接集中起来？(我给按钮类的链接)(我对web开发还不熟悉，对不起)

​

代码语言：javascript
复制
*{
    margin: 0px;
    padding: 0px;
}
html{
    cursor: url('media/cursor/cursor\ white.cur'), auto;
}
body{
    background-image: url(gridbg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    font-family: fontywonty;
}
@font-face {
    font-family: fontywonty;
    src: url(/media/fonts/RobotoSlab-Light.ttf);
  }
.content{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px;
}
.page{
    text-align: center;
    background-color: white;
    width: fit-content;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 0 10px 3px black;
}
.header{
    color: rgb(26, 26, 26); 
}
.buttons{
    display: flex;
    flex-direction: column;
}
a.button {
color: rgb(0, 0, 0);
border: none;
text-decoration: none;
background: rgba(255, 255, 255, 0.349);
width: fit-content;
}
a.button:hover{
    background: rgb(63, 63, 63);
    background: rgb(187, 187, 187);
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>DSM-5</title>
</head>
<body>
    <div class="content">
        <div class="page">
            <div class="header">
                <h1>A comprensive summary of the DSM-5</h1>
            </div>
            <div class="main">
                <div class="source">
                    <p>source: <a href="https://en.wikipedia.org/wiki/DSM-5">DSM-5</a></p>    
                </div>
                <div class="buttons">
                    <a href="/pages/Neurodevelopmental-Disorders.html" class="button">neurodevelopmental disorders</a>
                    <a href="/pages/Schizophrenia-Spectrum-and-Other-Psychotic-Disorders.html" class="button">Schizophrenia Spectrum and Other Psychotic Disorders</a>
                    <a href="/pages/Bipolar-and-Related-Disorders.html" class="button">Bipolar and Related Disorders</a>
                    <a href="/pages/Depressive-Disorders.html" class="button">Depressive Disorders</a>
                    <a href="/pages/Anxiety-disorders.html" class="button">Anxiety Disorders</a>
                    <a href="/pages/Obsessive-Compulsive-and Related-Disorders.html" class="button">Obsessive-Compulsive and Related Disorders</a>
                    <a href="/pages/Trauma-and Stressor-Related Disorders.html" class="button">Trauma- and Stressor-Related Disorders</a>
                    <a href="/pages/Dissociative-Disorders.html" class="button">Dissociative Disorders</a>
                    <a href="pages/Somatic-Symptom-and-Related-Disorders.html" class="button">Somatic Symptom and Related Disorders</a>
                    <a href="/pages/Feeding-and-Eating-Disorders.html" class="button">Feeding and Eating Disorders</a>
                    <a href="/pages/Elimination-Disorders.html" class="button">Elimination Disorders</a>
                    <a href="/pages/Sleep-Wake-Disorders.html" class="button">Sleep-Wake Disorders</a>
                    <a href="/pages/Sexual-Dysfunctions.html" class="button">Sexual Dysfunctions</a>
                    <a href="/pages/Gender-Dysphoria.html" class="button">Gender Dysphoria</a>
                    <a href="/pages/Disruptive-Impulse-Control-and-Conduct=Disorders.html" class="button">Disruptive, Impulse-Control, and Conduct Disorders</a>
                    <a href="/pages/Substance-Related-and-Addictive-Disorders.html" class="button">Substance-Related and Addictive Disorders</a>
                    <a href="/pages/Neurocognitive-Disorders.html" class="button">Neurocognitive Disorders</a>
                    <a href="/pages/Personality-Disorders.html" class="button">Personality Disorders</a>
                    <a href="/pages/Paraphilic-Disorders.html" class="button">Paraphilic Disorders</a>
                    <a href="Other-Mental-Disorders,html" class="button">Other Mental Disorders</a>
                </div>
            </div>
            <div class="footer">
                <sub>created by sidney</sub>
            </div>
        </div>
    </div>
</body>
</html>

​

html
css
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-03-21 15:47:36

你在努力做到这一点。绝对没有理由使用像min/fit/max-content.这样的“新”的东西只需按旧的方式做:让按钮display: block，为父程序做同样的事情(您不需要在任何地方使用flex！)如果需要，请使用width: max-content限制链接宽度。我宁愿不限制宽度(删除width: max-content)，让链接跨越整行，因为一些(很多？)人们也可以点击链接旁边的空白。同时，:hover效应也会贯穿全线。

请记住，只有在需要使用min/fit/max-content值、柔性盒和网格、filter属性、object-fit属性和许多其他特性时，才应该使用它们。更喜欢使用display: block和inline-block的“旧”方法，您将得到更多浏览器支持的网页，通常也会绘制得更快，使用更少的CSS行。我也喜欢使用柔性盒，但只在有意义的地方使用(自动包装的一系列块，列中的盒子等)。

请不要覆盖整个页面的鼠标光标形状。，您多久看到一次这样做的页面？当光标形状在没有合理原因的情况下发生变化时，用户可能会感到困惑(因为用户无法找到游标)，有些特定残疾的用户甚至无法使用该页面。更改游标也是一件只有在有充分理由的情况下才应该做的事情。

​

代码语言：javascript
复制
*{
    margin: 0px;
    padding: 0px;
}
html{
    cursor: url('media/cursor/cursor\ white.cur'), auto;
}
body{
    background-image: url(gridbg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    font-family: fontywonty;
}
@font-face {
    font-family: fontywonty;
    src: url(/media/fonts/RobotoSlab-Light.ttf);
  }
.content{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px;
}
.page{
    text-align: center;
    background-color: white;
    width: fit-content;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 0 10px 3px black;
}
.header{
    color: rgb(26, 26, 26); 
}
.buttons{
    display: block;
}
a.button {
display: block;
margin: auto;
width: max-content;
color: rgb(0, 0, 0);
border: none;
text-decoration: none;
background: rgba(255, 255, 255, 0.349);
}
a.button:hover{
    background: rgb(63, 63, 63);
    background: rgb(187, 187, 187);
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>DSM-5</title>
</head>
<body>
    <div class="content">
        <div class="page">
            <div class="header">
                <h1>A comprensive summary of the DSM-5</h1>
            </div>
            <div class="main">
                <div class="source">
                    <p>source: <a href="https://en.wikipedia.org/wiki/DSM-5">DSM-5</a></p>    
                </div>
                <div class="buttons">
                    <a href="/pages/Neurodevelopmental-Disorders.html" class="button">neurodevelopmental disorders</a>
                    <a href="/pages/Schizophrenia-Spectrum-and-Other-Psychotic-Disorders.html" class="button">Schizophrenia Spectrum and Other Psychotic Disorders</a>
                    <a href="/pages/Bipolar-and-Related-Disorders.html" class="button">Bipolar and Related Disorders</a>
                    <a href="/pages/Depressive-Disorders.html" class="button">Depressive Disorders</a>
                    <a href="/pages/Anxiety-disorders.html" class="button">Anxiety Disorders</a>
                    <a href="/pages/Obsessive-Compulsive-and Related-Disorders.html" class="button">Obsessive-Compulsive and Related Disorders</a>
                    <a href="/pages/Trauma-and Stressor-Related Disorders.html" class="button">Trauma- and Stressor-Related Disorders</a>
                    <a href="/pages/Dissociative-Disorders.html" class="button">Dissociative Disorders</a>
                    <a href="pages/Somatic-Symptom-and-Related-Disorders.html" class="button">Somatic Symptom and Related Disorders</a>
                    <a href="/pages/Feeding-and-Eating-Disorders.html" class="button">Feeding and Eating Disorders</a>
                    <a href="/pages/Elimination-Disorders.html" class="button">Elimination Disorders</a>
                    <a href="/pages/Sleep-Wake-Disorders.html" class="button">Sleep-Wake Disorders</a>
                    <a href="/pages/Sexual-Dysfunctions.html" class="button">Sexual Dysfunctions</a>
                    <a href="/pages/Gender-Dysphoria.html" class="button">Gender Dysphoria</a>
                    <a href="/pages/Disruptive-Impulse-Control-and-Conduct=Disorders.html" class="button">Disruptive, Impulse-Control, and Conduct Disorders</a>
                    <a href="/pages/Substance-Related-and-Addictive-Disorders.html" class="button">Substance-Related and Addictive Disorders</a>
                    <a href="/pages/Neurocognitive-Disorders.html" class="button">Neurocognitive Disorders</a>
                    <a href="/pages/Personality-Disorders.html" class="button">Personality Disorders</a>
                    <a href="/pages/Paraphilic-Disorders.html" class="button">Paraphilic Disorders</a>
                    <a href="Other-Mental-Disorders,html" class="button">Other Mental Disorders</a>
                </div>
            </div>
            <div class="footer">
                <sub>created by sidney</sub>
            </div>
        </div>
    </div>
</body>
</html>

​

票数 2
EN

Stack Overflow用户

发布于 2022-03-21 15:46:47

此时您只需要将align-items:center;添加到.buttons中，它就可以工作了，如下所示：

​

代码语言：javascript
复制
*{
    margin: 0px;
    padding: 0px;
}
html{
    cursor: url('media/cursor/cursor\ white.cur'), auto;
}
body{
    background-image: url(gridbg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    font-family: fontywonty;
}
@font-face {
    font-family: fontywonty;
    src: url(/media/fonts/RobotoSlab-Light.ttf);
  }
.content{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px;
}
.page{
    text-align: center;
    background-color: white;
    width: fit-content;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 0 10px 3px black;
}
.header{
    color: rgb(26, 26, 26); 
}
.buttons{
    display: flex;
    flex-direction: column;
    align-items:center; /* you needed this line*/
}
a.button {
color: rgb(0, 0, 0);
border: none;
text-decoration: none;
background: rgba(255, 255, 255, 0.349);
 
}
a.button:hover{
    background: rgb(63, 63, 63);
    background: rgb(187, 187, 187);
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>DSM-5</title>
</head>
<body>
    <div class="content">
        <div class="page">
            <div class="header">
                <h1>A comprensive summary of the DSM-5</h1>
            </div>
            <div class="main">
                <div class="source">
                    <p>source: <a href="https://en.wikipedia.org/wiki/DSM-5">DSM-5</a></p>    
                </div>
                <div class="buttons">
                    <a href="/pages/Neurodevelopmental-Disorders.html" class="button">neurodevelopmental disorders</a>
                    <a href="/pages/Schizophrenia-Spectrum-and-Other-Psychotic-Disorders.html" class="button">Schizophrenia Spectrum and Other Psychotic Disorders</a>
                    <a href="/pages/Bipolar-and-Related-Disorders.html" class="button">Bipolar and Related Disorders</a>
                    <a href="/pages/Depressive-Disorders.html" class="button">Depressive Disorders</a>
                    <a href="/pages/Anxiety-disorders.html" class="button">Anxiety Disorders</a>
                    <a href="/pages/Obsessive-Compulsive-and Related-Disorders.html" class="button">Obsessive-Compulsive and Related Disorders</a>
                    <a href="/pages/Trauma-and Stressor-Related Disorders.html" class="button">Trauma- and Stressor-Related Disorders</a>
                    <a href="/pages/Dissociative-Disorders.html" class="button">Dissociative Disorders</a>
                    <a href="pages/Somatic-Symptom-and-Related-Disorders.html" class="button">Somatic Symptom and Related Disorders</a>
                    <a href="/pages/Feeding-and-Eating-Disorders.html" class="button">Feeding and Eating Disorders</a>
                    <a href="/pages/Elimination-Disorders.html" class="button">Elimination Disorders</a>
                    <a href="/pages/Sleep-Wake-Disorders.html" class="button">Sleep-Wake Disorders</a>
                    <a href="/pages/Sexual-Dysfunctions.html" class="button">Sexual Dysfunctions</a>
                    <a href="/pages/Gender-Dysphoria.html" class="button">Gender Dysphoria</a>
                    <a href="/pages/Disruptive-Impulse-Control-and-Conduct=Disorders.html" class="button">Disruptive, Impulse-Control, and Conduct Disorders</a>
                    <a href="/pages/Substance-Related-and-Addictive-Disorders.html" class="button">Substance-Related and Addictive Disorders</a>
                    <a href="/pages/Neurocognitive-Disorders.html" class="button">Neurocognitive Disorders</a>
                    <a href="/pages/Personality-Disorders.html" class="button">Personality Disorders</a>
                    <a href="/pages/Paraphilic-Disorders.html" class="button">Paraphilic Disorders</a>
                    <a href="Other-Mental-Disorders,html" class="button">Other Mental Disorders</a>
                </div>
            </div>
            <div class="footer">
                <sub>created by sidney</sub>
            </div>
        </div>
    </div>
</body>
</html>

​

票数 1
EN

Stack Overflow用户

发布于 2022-03-21 16:15:45

​

代码语言：javascript
复制
*{
    margin: 0px;
    padding: 0px;
}
html{
    cursor: url('media/cursor/cursor\ white.cur'), auto;
}
body{
    background-image: url(gridbg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    font-family: fontywonty;
}
@font-face {
    font-family: fontywonty;
    src: url(/media/fonts/RobotoSlab-Light.ttf);
  }
.content{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px;
}
.page{
    text-align: center;
    background-color: white;
    width: fit-content;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 0 10px 3px black;
}
.header{
    color: rgb(26, 26, 26); 
}
.buttons{
    display: flex;
    flex-direction: column;
}
a.button {
color: rgb(0, 0, 0);
border: none;
text-decoration: none;
background: rgba(255, 255, 255, 0.349);
}
a.button:hover{
    background: rgb(63, 63, 63);
    background: rgb(187, 187, 187);
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>DSM-5</title>
</head>
<body>
    <div class="content">
        <div class="page">
            <div class="header">
                <h1>A comprensive summary of the DSM-5</h1>
            </div>
            <div class="main">
                <div class="source">
                    <p>source: <a href="https://en.wikipedia.org/wiki/DSM-5">DSM-5</a></p>    
                </div>
                <div class="buttons">
                    <a href="/pages/Neurodevelopmental-Disorders.html" class="button">neurodevelopmental disorders</a>
                    <a href="/pages/Schizophrenia-Spectrum-and-Other-Psychotic-Disorders.html" class="button">Schizophrenia Spectrum and Other Psychotic Disorders</a>
                    <a href="/pages/Bipolar-and-Related-Disorders.html" class="button">Bipolar and Related Disorders</a>
                    <a href="/pages/Depressive-Disorders.html" class="button">Depressive Disorders</a>
                    <a href="/pages/Anxiety-disorders.html" class="button">Anxiety Disorders</a>
                    <a href="/pages/Obsessive-Compulsive-and Related-Disorders.html" class="button">Obsessive-Compulsive and Related Disorders</a>
                    <a href="/pages/Trauma-and Stressor-Related Disorders.html" class="button">Trauma- and Stressor-Related Disorders</a>
                    <a href="/pages/Dissociative-Disorders.html" class="button">Dissociative Disorders</a>
                    <a href="pages/Somatic-Symptom-and-Related-Disorders.html" class="button">Somatic Symptom and Related Disorders</a>
                    <a href="/pages/Feeding-and-Eating-Disorders.html" class="button">Feeding and Eating Disorders</a>
                    <a href="/pages/Elimination-Disorders.html" class="button">Elimination Disorders</a>
                    <a href="/pages/Sleep-Wake-Disorders.html" class="button">Sleep-Wake Disorders</a>
                    <a href="/pages/Sexual-Dysfunctions.html" class="button">Sexual Dysfunctions</a>
                    <a href="/pages/Gender-Dysphoria.html" class="button">Gender Dysphoria</a>
                    <a href="/pages/Disruptive-Impulse-Control-and-Conduct=Disorders.html" class="button">Disruptive, Impulse-Control, and Conduct Disorders</a>
                    <a href="/pages/Substance-Related-and-Addictive-Disorders.html" class="button">Substance-Related and Addictive Disorders</a>
                    <a href="/pages/Neurocognitive-Disorders.html" class="button">Neurocognitive Disorders</a>
                    <a href="/pages/Personality-Disorders.html" class="button">Personality Disorders</a>
                    <a href="/pages/Paraphilic-Disorders.html" class="button">Paraphilic Disorders</a>
                    <a href="Other-Mental-Disorders,html" class="button">Other Mental Disorders</a>
                </div>
            </div>
            <div class="footer">
                <sub>created by sidney</sub>
            </div>
        </div>
    </div>
</body>
</html>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/71560245

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档