使多个段落显示为一个段落

Question

我正在尝试制作一个工具，根据你的鞋子尺寸计算你需要多大的滑板。这是代码：

const shoeSizeInput = document.getElementById('shoeSize')
const shoeSizeResult = document.getElementById('resultSize') 
shoeSizeInput.addEventListener('input', (event) => {
const shoeSize = parseInt(event.target.value) 
let boardSize = '?'
switch (true) {
case 0 <= shoeSize && shoeSize <= 7:
boardSize = '7.75'
break;
case shoeSize === 8 || shoeSize === 9:
boardSize = '8'
break;
case shoeSize === 10 || shoeSize === 11:
boardSize = '8.25'
break;
case shoeSize === 12 || shoeSize === 13:
boardSize = '8.38'
break;
case 14 <= shoeSize && shoeSize <= 20:
boardSize = '8.5'
break;
}
shoeSizeResult.textContent = boardSize 
})

<div class="board-tool">
<p>Most people pick their board size by prefrence but I will make a tool below to choose a board size that will fit your shoe size best. The most popular board sizes are 7.75, 8, 8.25, 8.38, and 8.5.</p>
<label>If your shoe size is:</label><input id='shoeSize' type="number" class="shoe">
<p id="resultSize"></p><p>should be your ideal board size.</p>
</div>

.shoe {
width: 50px;
height: 15px;
border-radius: 5px;
margin-left: 10px;
}
.board-tool {
font-size: 1.5rem;
}

所有的代码都有效，但问题是第一段、标签和后面的一段都在不同的行上，但我想把它整理成一段，例如：如果你的鞋码是：12，8.25将是理想的板码

Answer 1

有几种方法可以解决您的问题。但我认为首先要对HTML元素有一个基本的了解。

<p>(段落(元素是块项目，这意味着，默认情况下，它们的宽度是其包含元素的100%，并且它们具有默认的上下边距，旨在提供元素之间的一些默认间距。

<span>元素是内联的。它们一个接一个地连续运行，这样它们就可以读成一段。

然而，现在的情况要先进得多，使用样式和类规则，可以将<p>重新定义为<span>，反之亦然，正如您在下面的代码片段中看到的那样。

虽然我不建议养成这种习惯，但它是可以做到的。代码后面的示例div使用浅灰色虚线边框，因此您可以看到块与内联元素的默认宽度

const shoeSizeInput = document.getElementById('shoeSize')
const shoeSizeResult = document.getElementById('resultSize')
shoeSizeInput.addEventListener('input', (event) => {
const shoeSize = parseInt(event.target.value)
let boardSize = '?'
switch (true) {
case 0 <= shoeSize && shoeSize <= 7:
boardSize = '7.75'
break;
case shoeSize === 8 || shoeSize === 9:
boardSize = '8'
break;
case shoeSize === 10 || shoeSize === 11:
boardSize = '8.25'
break;
case shoeSize === 12 || shoeSize === 13:
boardSize = '8.38'
break;
case 14 <= shoeSize && shoeSize <= 20:
boardSize = '8.5'
break;
}
shoeSizeResult.textContent = boardSize
})

.shoe {
width: 50px;
height: 15px;
border-radius: 5px;
margin-left: 10px;
}
.board-tool {
font-size: 1.5rem;
}
/* End OP CSS */
/* Begin Example CSS */
.d-inline {
display: inline;
}
.d-block {
display: block;
}
.m-none {
margin: 0;
}
.mt {
margin-top: 10px;
}
.mtb {
margin: 10px 0;
}
.b {
border: 1px solid green;
}
div.example>div {
padding: 10px;
}
div.example>div>p,
div.example>div>span {
border: 1px dashed #ccc;
}

<div class="board-tool">
<p>Most people pick their board size by prefrence but I will make a tool below to choose a board size that will fit your shoe size best. The most popular board sizes are 7.75, 8, 8.25, 8.38, and 8.5.</p>
<p>If your shoe size is: <input id='shoeSize' type="number" class="shoe">
<span id="resultSize"></span>
<span>should be your ideal board size.</span>
</p>
</div>
<div class="example">
<div class="mt b">
<p>paragraphs </p>
<p>as default</p>
<p>block items.</p>
</div>
<div class="mt b">
<p class="d-inline m-none">paragraphs </p>
<p class="d-inline m-none">styled as </p>
<p class="d-inline m-none">spans.</p>
</div>
<div class="mt b">
<span class="d-block mtb">span elements </span>
<span class="d-block mtb">styled as </span>
<span class="d-block mtb">paragraph elements.</span>
</div>
</div>

Answer 2

步骤1:

将.board-tool更改为display: flex

步骤2:

将.board-too更改为flex-wrap: wrap和align-items: center

步骤3：给你的最后一段一个10px的margin-left

代码：

CSS：

.shoe {
width: 50px;
height: 15px;
border-radius: 5px;
margin-left: 10px;
}
.board-tool {
font-size: 1.5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.resultLabel {
margin-left: 10px;
}

HTML:

<div class="board-tool">
<p>Most people pick their board size by prefrence but I will make a tool below to choose a board size that will fit
your shoe size best. The most popular board sizes are 7.75, 8, 8.25, 8.38, and 8.5.</p>
<label>If your shoe size is:</label><input id='shoeSize' type="number" class="shoe">
<p id="resultSize"></p>
<p class="resultLabel">should be your ideal board size.</p>
</div>

javascript 没有变化

有关flexbox的更多信息，请访问W3Schools:flexbox

Answer 3

p元素是"段落"，因此默认情况下将开始换行。

您可以将那些p元素更改为span元素。

const shoeSizeInput = document.getElementById('shoeSize')
const shoeSizeResult = document.getElementById('resultSize')
shoeSizeInput.addEventListener('input', (event) => {
const shoeSize = parseInt(event.target.value)
let boardSize = '?'
switch (true) {
case 0 <= shoeSize && shoeSize <= 7:
boardSize = '7.75'
break;
case shoeSize === 8 || shoeSize === 9:
boardSize = '8'
break;
case shoeSize === 10 || shoeSize === 11:
boardSize = '8.25'
break;
case shoeSize === 12 || shoeSize === 13:
boardSize = '8.38'
break;
case 14 <= shoeSize && shoeSize <= 20:
boardSize = '8.5'
break;
}
shoeSizeResult.textContent = boardSize
})

.shoe {
width: 50px;
height: 15px;
border-radius: 5px;
margin-left: 10px;
}
.board-tool {
font-size: 1.5rem;
}

<div class="board-tool">
<p>Most people pick their board size by prefrence but I will make a tool below to choose a board size that will fit your shoe size best. The most popular board sizes are 7.75, 8, 8.25, 8.38, and 8.5.</p>
<label>If your shoe size is:</label><input id='shoeSize' type="number" class="shoe">
<span id="resultSize">?</span><span> should be your ideal board size.</span>
</div>