CSS空格nowrap似乎不起作用，可能是其他问题？

Question

I'm trying to append a plus sign to my range slider. It appears below the slider rather than after the number. I'm sure this is a simple fix, but I can't figure out what I've done wrong here.

Here is a jsfiddle example. 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>

Thanks in advance.

Answer 1

The problem is that you are using a block level element, like <p> . Simply changing it to something that is naturally inline like <span> fixes this issue. Learn about the box model!

fiddle

Answer 2

Just change your p tag to span .

Code to be changed: <span id="plus"></span>

Check out below:

  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> 

Answer 3

您需要将加号从段落更改为跨度，并且可以根据需要使用它。

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

Answer 4

P is a block element, block elements dont allow any other elements to settle in same line with them , use span a inline element which settles beside any other element in same line for more information about block and inline elements please visit the link below

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>