Html 文本移动到下一行时没有宽度问题

我在一个问题上完全被难住了。这是最简单的问题，但我就是找不到问题所在。我有一行文本，周围有一个边框，用作按钮。我增加了其中的文本，从那时起，只要视口低于1200px，一半的文本就会跳到下一行

我创建了一个代码片段来复制它，但即使这样也无济于事，所以这很可能需要现场观看。问题所在的区域位于该部分底部的“与我们一起发展业务”部分（在3张图片下）

请在小于1200像素的视口中查看

是什么导致自制按钮出现在两行上？我把宽度设为100%

$（函数（）{
$（“#查看所有服务文本”）。动画({
不透明度：1，
左：“0%”
}, 700);
})

#主img块段{
宽度：100%；
高度：850px；
}
#查看所有服务{
宽度：100%；
高度：75px；
文本对齐：居中；
}
#请参阅所有服务文本{
不透明度：0；
字体大小：1.3em；
位置：相对位置；
左-30%；
}
#请参阅所有服务文本a{
文字装饰：无；
颜色：#45a5ba；
光标：指针；
}
#查看所有服务按钮{
填充：15px 20px；
边框：2px实心#45a5ba；
过渡：易进易出。5s；
}
#查看所有服务按钮：悬停{
边框：2px实心#45a5ba；
颜色：#FFF；
背景#45a5ba；
过渡：易进易出。5s；
}
/*----------------------------------------------媒体查询961-1200--------------------------*/
@媒体屏幕和（最小宽度：961px）和（最大宽度：1200px）{
#主img块段{
高度：670px；
}
#请参阅所有服务文本{
字体大小：1.2米；
}
}

---

之所以发生这种情况，是因为您的按钮是内联的

元素。设置
显示：内联块到它并移除
宽度：100%，一切都应该正常

您的代码片段：


$（函数（）{
$（“#查看所有服务文本”）。动画({
不透明度：1，
左：“0%”
}, 700);
})
#主img块段{
宽度：100%；
高度：850px；
}
#查看所有服务{
宽度：100%；
高度：75px；
文本对齐：居中；
}
#请参阅所有服务文本{
不透明度：0；
字体大小：1.3em；
位置：相对位置；
左-30%；
}
#请参阅所有服务文本a{
文字装饰：无；
颜色：#45a5ba；
光标：指针；
}
#查看所有服务按钮{
填充：15px 20px；
显示：内联块；
边框：2px实心#45a5ba；
过渡：易进易出。5s；
}
#查看所有服务按钮：悬停{
边框：2px实心#45a5ba；
颜色：#FFF；
背景#45a5ba；
过渡：易进易出。5s；
}
/*----------------------------------------------媒体查询961-1200--------------------------*/
@媒体屏幕和（最小宽度：961px）和（最大宽度：1200px）{
#主img块段{
高度：670px；
}
#请参阅所有服务文本{
字体大小：1.2米；
}
}
之所以发生这种情况，是因为您的按钮是内联的
元素。设置
显示：内联块到它并移除
宽度：100%，一切都应该正常

您的代码片段：


$（函数（）{
$（“#查看所有服务文本”）。动画({
不透明度：1，
左：“0%”
}, 700);
})
#主img块段{
宽度：100%；
高度：850px；
}
#查看所有服务{
宽度：100%；
高度：75px；
文本对齐：居中；
}
#请参阅所有服务文本{
不透明度：0；
字体大小：1.3em；
位置：相对位置；
左-30%；
}
#请参阅所有服务文本a{
文字装饰：无；
颜色：#45a5ba；
光标：指针；
}
#查看所有服务按钮{
填充：15px 20px；
显示：内联块；
边框：2px实心#45a5ba；
过渡：易进易出。5s；
}
#查看所有服务按钮：悬停{
边框：2px实心#45a5ba；
颜色：#FFF；
背景#45a5ba；
过渡：易进易出。5s；
}
/*----------------------------------------------媒体查询961-1200--------------------------*/
@媒体屏幕和（最小宽度：961px）和（最大宽度：1200px）{
#主img块段{
高度：670px；
}
#请参阅所有服务文本{
字体大小：1.2米；
}
}

您想让它居中还是向右对齐？我只想让它像在更大的视口中一样居中。在我添加更多文本之前，所有的视口都会像这样。虽然没有关联，但我甚至无法访问该部分。我正在使用OSX和一个神奇的鼠标，你的卷轴劫持只是把我推到了网站的底部。完全不可用。在页面加载时，它会这样做，或者当您在该部分并点击“重新加载”按钮时？您希望它对齐到中心还是右侧？我只希望它居中，就像在更大的视口中一样。在我添加更多文本之前，所有的视口都会像这样。虽然没有关联，但我甚至无法访问该部分。我正在使用OSX和一个神奇的鼠标，你的卷轴劫持只是把我推到了网站的底部。完全无法使用。在页面加载时，或者当您在该部分并点击“重新加载”按钮时，它会执行此操作？这有助于将所有内容放在一行上，但它位于页面的右侧，而不是中间。@Becky add
clear:将这两个内容都添加到
#查看所有服务文本
元素中。您需要清除浮动上下文，才能在此块下方有按钮。阅读有关浮动及其工作原理的文章——就是这样。谢谢这有助于将所有内容放在一行上，但它位于页面的右侧而不是中间。@Becky将
清除：两个
都添加到
#查看所有服务文本
元素。您需要清除浮动上下文，才能在此块下方有按钮。阅读有关浮动及其工作原理的文章——就是这样。谢谢