CSS white-space nowrap 似乎不起作用，可能是不同的问题？答案

【问题标题】：CSS white-space nowrap doesn't seem to be working, possibly different issue?CSS white-space nowrap 似乎不起作用，可能是不同的问题？
【发布时间】：2015-09-22 17:48:25
【问题描述】：

我正在尝试在我的范围滑块上附加一个加号。它出现在滑块下方而不是数字之后。我确信这是一个简单的修复，但我无法弄清楚我在这里做错了什么。

这是一个 jsfiddle 示例。 http://jsfiddle.net/61cm5vmm/

<style>
.sliderGroup {
    float: left;
    width:250px;
    height:50px;
    margin: 5px;
    padding: 15px;
    border: 3px solid black;
    background-color: rgb(230,255,230)
} 

.center {
    margin: auto;
    width: 50%;
    padding: 10px;
}

.daysAR {
    height: 50px;
    white-space: nowrap;
}
    </style>
<div class="center">
<div class="sliderGroup">
<div class="daysAR">
<label for="days">Days in Accounts Recievable</label><br />
<input type="range" min="0" max="61" value="30" id="days" step="1" oninput="accountsRecievableSlider(value);average1();average4()">
<output for="days" id="daysInAR">30</output><p id="plus"></p>
</div>
</div>
</div>

提前致谢。

【问题讨论】：

标签： javascript html css slider range

【解决方案1】：

问题在于您使用的是块级元素，例如<p>。只需将其更改为像 <span> 这样自然内联的内容即可解决此问题。 Learn about the box model!

fiddle

【讨论】：

【解决方案2】：

只需将您的 p 标签更改为 span。

要更改的代码： <span id="plus"></span>

看看下面：

	function accountsRecievableSlider(AR) {
		document.querySelector('#daysInAR').value = AR;
		var selectday = document.querySelector('#daysInAR').value
		if (selectday > 60){
				document.getElementById("plus").innerHTML =("+")
		}	else{
				document.getElementById("plus").innerHTML =("")
			}
	}

.sliderGroup {
    float: left;
	width:250px;
	height:50px;
    margin: 5px;
    padding: 15px;
    border: 3px solid black;
	background-color: rgb(230,255,230)
} 

.center {
    margin: auto;
    width: 50%;
    padding: 10px;
}

.daysAR {
	height: 50px;
	white-space: nowrap;
}

<div class="center">
<div class="sliderGroup">
<div class="daysAR">
<label for="days">Days in Accounts Recievable</label><br />
<input type="range" min="0" max="61" value="30" id="days" step="1" oninput="accountsRecievableSlider(value);average1();average4()">
<output for="days" id="daysInAR">30</output><span id="plus"></span>
</div 
</div>
</div>

【讨论】：

【解决方案3】：

您需要将加号从段落更改为跨度，它会根据您的需要工作。

<span id="plus"></span>

【讨论】：

【解决方案4】：

P 是块元素，块元素不允许任何其他元素与它们在同一行中放置，请使用 span 放置在同一行中的任何其他元素旁边的内联元素以获取有关块和内联元素的更多信息访问下面的链接

http://www.impressivewebs.com/difference-block-inline-css/

.sliderGroup {
  float: left;
  width: 250px;
  height: 50px;
  margin: 5px;
  padding: 15px;
  border: 3px solid black;
  background-color: rgb(230, 255, 230)
}
.center {
  margin: auto;
  width: 50%;
  padding: 10px;
}
.daysAR {
  height: 50px;
}

<div class="center">
  <div class="sliderGroup">
    <div class="daysAR">
      <label for="days">Days in Accounts Recievable</label>
      <br />
      <input type="range" min="0" max="61" value="30" id="days" step="1" oninput="accountsRecievableSlider(value);average1();average4()">
      <output for="days" id="daysInAR">30</output><span id="plus">+</span>
    </div>
  </div>
</div>

【讨论】：