保持框的宽度不变，与文本的长度无关

Question

我正在制作时间轴工具。我在这里遇到的问题是，当我选择下一个或上一个时，根据日期的长度，它的位置会发生变化。我不希望随着日期的变化，时间线工具的位置发生变化。

.timelinetool {
	background: rgba(108, 171, 231, 0.3);
	display: inline-block;
	margin: 2px auto 2px auto;
	padding: 5px 5px 5px 5px;
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 28px;

}

.btn1 {
	border-width: 0px;
	background: #3498db;
	background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
	background-image: -moz-linear-gradient(top, #3498db, #2980b9);
	background-image: -ms-linear-gradient(top, #3498db, #2980b9);
	background-image: -o-linear-gradient(top, #3498db, #2980b9);
	background-image: linear-gradient(to bottom, #3498db, #2980b9);
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 28px;
	font-family: Arial;
	color: #ffffff;
	font-size: 15px;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	width: 120px;
	cursor: pointer;
}
 .textBetween {
	width:250px;
    margin: auto; 
    background-size: 250px;
    border-width: 0px;
    font-size: 15px;
    padding: 10px 20px 10px 20px;
 
} 

.btn {
	border-width: 0px;
	float: center;
	background: #3498db;
	background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
	background-image: -moz-linear-gradient(top, #3498db, #2980b9);
	background-image: -ms-linear-gradient(top, #3498db, #2980b9);
	background-image: -o-linear-gradient(top, #3498db, #2980b9);
	background-image: linear-gradient(to bottom, #3498db, #2980b9);
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 28px;
	font-family: Arial;
	color: #ffffff;
	font-size: 15px;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	z-index: 2;
	cursor: pointer;
    width: 280px;
}

.btn:hover,.btn1:hover {
	background: #3cb0fd;
	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
	text-decoration: none;
}

<h:form>
    <div style="margin-left: 10%;" class="timelinetool">
	    <h:commandButton value="Previous" title="Go to previous week"
			             class="btn1" action="#{trafficDisplayPagination.preval}">
		    <f:ajax render="foo" />
		</h:commandButton>
		<h:panelGroup id="foo">
		    <span class="textBetween">
                <h:outputText value="#{trafficDisplayPagination.previousWeekLink}" />
			</span>
			<h:commandButton 
                    value="#{trafficDisplayPagination.currentWeekLink} "
					title="Click to load Initiatives of this week" 
                    class="btn" 
                    action="#{trafficDisplayPagination.OnClickofDate}">
			    <f:ajax render=":form:datatablediv" />
			</h:commandButton>

			<span class="textBetween"> 
                <h:outputText value="#{trafficDisplayPagination.nextWeekLink}" />
			</span>
		</h:panelGroup>

		<h:commandButton value="Next" title="Go to next week"
					     class="btn1" 
                         action="#{trafficDisplayPagination.nextval}">
			<f:ajax render="foo" />
		</h:commandButton>
	</div>
</h:form>