按钮切成两半

Question

所以我正在为一个课程项目做这个网站，出于某种原因，如果我在屏幕上尽可能地缩小浏览器窗口，我页面的“关于”部分中的第二个按钮会减少一半，无论是否有溢出设置。

我附上了按钮的图像和我的CSS和HTML的片段，看看是否可能，只是也许，有人可以弄清楚为什么这个按钮被砍掉了。 My Website (Why Should You Go Section)

.about {
    position: relative;
    text-align: center;
    padding-bottom: 9em;
    overflow: hidden;
    
}

.about h2 {
    margin-top: 2em;
    font-family: 'Didot', 'Times New Roman', serif;
    font-size: 4.5em;
    color: #ff5339; 
/*    text-align: center;*/
}

.about hr {
    width: 90%;
    border: 0;
    height: 1px;
    background: #61792f;
}

.about p {
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4em;
    width: 80%;
    font-family: 'Open Sans', 'Arial', sans-serif;
    font-size: 1.5em;
    color: #61792f;
    line-height: 150%;
    text-align: left
}

.about a {
    text-decoration: none;
    font-family: 'Open Sans', 'Arial', sans-serif;
    font-weight: 700;
    font-size: 1.5em;
    color: #ff5339;
    border: 3px solid #ff5339;
    padding: .3em .7em;
    margin: 1em;
}

.about a:hover {
    border: 3px solid #ff5339;
    background-color: #ff5339;
    color: #e9dec5;
}

<div class="about">
        <h2>WHY SHOULD YOU GO?</h2>
        <hr>
        <p>Germany is a fascinating fusion of old and new. The bohemian streets of Berlin act as a fertile breeding ground for hip art, unique design and innovative ideas, while heritage-filled Munich boasts historic architecture in the form of impressive Baroque and Rococo buildings. In between, travellers will find stretches of idyllic countryside, impossibly gorgeous castles, charming university towns and boisterous Bavarian beer halls. Be introduced to the progressive cities and romantic splendour of Germany and never look back.</p>
        <a href="about.html" class="learn">LEARN MORE</a>
        <a href="tours.html" class="book">BOOK NOW</a>
    </div>

Answer 1

这是因为白色空间包裹。在white-space: nowrap;样式中添加.about a。

Answer 2

虽然您可以使用类似white-space: nowrap;的内容来解决此问题，但问题在于您的a标记是display: inline元素。您希望它们在这种情况下的行为类似于块级元素，但仍然保持内联，因此您正在寻找的是.about a { display: inline-block; }：

＆＃13;

＆＃13;

.about {
    position: relative;
    text-align: center;
    padding-bottom: 9em;
    overflow: hidden;
    
}

.about h2 {
    margin-top: 2em;
    font-family: 'Didot', 'Times New Roman', serif;
    font-size: 4.5em;
    color: #ff5339; 
/*    text-align: center;*/
}

.about hr {
    width: 90%;
    border: 0;
    height: 1px;
    background: #61792f;
}

.about p {
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4em;
    width: 80%;
    font-family: 'Open Sans', 'Arial', sans-serif;
    font-size: 1.5em;
    color: #61792f;
    line-height: 150%;
    text-align: left
}

.about a {
    text-decoration: none;
    font-family: 'Open Sans', 'Arial', sans-serif;
    font-weight: 700;
    font-size: 1.5em;
    color: #ff5339;
    border: 3px solid #ff5339;
    padding: .3em .7em;
    margin: 1em;
    display: inline-block; /* Add This */
}

.about a:hover {
    border: 3px solid #ff5339;
    background-color: #ff5339;
    color: #e9dec5;
}

＆＃13;

<div class="about">
        <h2>WHY SHOULD YOU GO?</h2>
        <hr>
        <p>Germany is a fascinating fusion of old and new. The bohemian streets of Berlin act as a fertile breeding ground for hip art, unique design and innovative ideas, while heritage-filled Munich boasts historic architecture in the form of impressive Baroque and Rococo buildings. In between, travellers will find stretches of idyllic countryside, impossibly gorgeous castles, charming university towns and boisterous Bavarian beer halls. Be introduced to the progressive cities and romantic splendour of Germany and never look back.</p>
        <a href="about.html" class="learn">LEARN MORE</a>
        <a href="tours.html" class="book">BOOK NOW</a>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在A标签上调用 display：inline-block 将是最简单的修复，并且可以在IE8 +及其他浏览器的当前版本上运行。

为了更好地控制它们在较小宽度（和移动设备）中的响应方式，我将A标签设置为 display：block; 并设置宽度并浮动它们。