使多个段落显示为一个

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> 元素是内联的。它们运行一个接一个地连续出现，这样它们就可以作为一个段落来阅读。

但是，现在情况要先进得多，使用样式和 class 规则很有可能将 <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

p 元素是 'paragraphs' 所以默认情况下会开始换行。

您可以将那些 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>

Answer 3

第 1 步：

将 .board-tool 更改为 display: flex

第 2 步：

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

第 3 步：给你的最后一段 margin-left of 10px

代码：

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

使多个段落显示为一个

Making multiple paragraphs show up as one

html

css

inline

paragraph