Блог

Главная - Вопросы по программированию - Чтобы несколько абзацев отображались как один

Чтобы несколько абзацев отображались как один

#html #css #inline #p

#HTML #css #встроенный #абзац

Вопрос:

Я пытаюсь создать инструмент, который вычисляет, какой размер скейтборда вам понадобится, в зависимости от размера вашей обуви. Вот код:

 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 amp;amp; 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 amp;amp; 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размер доски.

Ответ №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 amp;amp; 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 amp;amp; 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>

Ответ №2:

Шаг 1:

изменить .board-tool на display: flex

Шаг 2:

измените .board-too на flex-wrap: wrap и align-items: center

Шаг 3. укажите margin-left в последнем абзаце 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

Ответ №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 amp;amp; 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 amp;amp; 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>

Метки: ,