Question

我对我遇到的问题感到十分困惑。这是最简单的问题，但我找不到问题。我有一行文字，周围有一个边框作为按钮。我在其中增加了文本，从那时起，只要视口低于1200px，文本的一半就会跳转到下一行。

我创建了一个代码片段来复制它，但即使这样也无济于事，所以最有可能必须现场直播。问题出在的地方是该部分最底部的“与我们一起拓展业务”部分（在3张图片下）。

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

是什么导致自制按钮位于2行？我将宽度设置为100％？

$(function() {
  $('#see-all-services-text').animate({
    opacity: 1,
    left: '0%'
  }, 700);
  })

#home-img-block-section {
	width: 100%;
	height: 850px;
}
#see-all-services {
	width: 100%;
	height: 75px;
	text-align: center;
}
#see-all-services-text {
    opacity: 0;
	font-size: 1.3em;
	position: relative;
	left: -30%;
}
#see-all-services-text a {
	text-decoration: none;
	color: #45a5ba;
	cursor: pointer;
}
#see-all-services-button {
	padding: 15px 20px;
	border: 2px solid #45a5ba;
	transition: ease-in-out .5s;
}
#see-all-services-button:hover {
	border: 2px solid #45a5ba;
	color: #FFF;
	background: #45a5ba;
	transition: ease-in-out .5s;
}

/*---------------------------------------------- MEDIA QUERY 961 - 1200--------------------------*/

@media screen and (min-width: 961px) and (max-width: 1200px) {
#home-img-block-section {
	height: 670px;
}
#see-all-services-text {
	font-size: 1.2em;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-block-section">
  <div id="see-all-services">
    <div id="see-all-services-text"><a href="services"><span id="see-all-services-button">VIEW ALL WEB DESIGN SERVICES</span></a></div>
  </div>
</div>

Answer 1

它发生了，因为你的按钮是inline元素。设置display:inline-block;并删除width:100%;，一切正常。

您的代码段：

＆＃13;

$(function() {
  $('#see-all-services-text').animate({
    opacity: 1,
    left: '0%'
  }, 700);
  })

＆＃13;

#home-img-block-section {
	width: 100%;
	height: 850px;
}
#see-all-services {
	width: 100%;
	height: 75px;
	text-align: center;
}
#see-all-services-text {
    opacity: 0;
	font-size: 1.3em;
	position: relative;
	left: -30%;
}
#see-all-services-text a {
	text-decoration: none;
	color: #45a5ba;
	cursor: pointer;
}
#see-all-services-button {
	padding: 15px 20px;
    display: inline-block;
	border: 2px solid #45a5ba;
	transition: ease-in-out .5s;
}
#see-all-services-button:hover {
	border: 2px solid #45a5ba;
	color: #FFF;
	background: #45a5ba;
	transition: ease-in-out .5s;
}

/*---------------------------------------------- MEDIA QUERY 961 - 1200--------------------------*/

@media screen and (min-width: 961px) and (max-width: 1200px) {
#home-img-block-section {
	height: 670px;
}
#see-all-services-text {
	font-size: 1.2em;
}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home-img-block-section">
  <div id="see-all-services">
    <div id="see-all-services-text"><a href="services"><span id="see-all-services-button">VIEW ALL WEB DESIGN SERVICES</span></a></div>
  </div>
</div>

＆＃13;

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

1 个答案: