Как завершить пунктирную границу после текста вместо того, чтобы проходить через страницу в правильном направлении?

#html #css #border

#HTML #css #граница

Вопрос:

Пунктирная граница (скриншот и предпочтительная конечная точка)

Как вы можете видеть, граница простирается до конца страницы, хотя я бы предпочел, чтобы она заканчивалась сразу после окончания текста.. (почти). Есть ли конкретный способ сделать это? ps. Я хочу, чтобы это было только для этого заголовка, а не для чего-либо еще.

Вот мой код:

 <h1 style="border-style:dashed;border-left-width:2px;border-right-width:2px;border-width:2px;border-color:black;"><b><u>Current Projects (in order of importance):</b></u></h1>
<p><ol>
	<li>Apartment Life Redux</li>
	<li>Sharpshooter Infinite</li>
</ol></p>

Ответ №1:

Вам просто нужно добавить display:inline; , и все будет в порядке.

 <h1 style="border-style:dashed;border-left-width:2px;border-right-width:2px;border-width:2px;border-color:black; display:inline;"><b><u>Current Projects (in order of importance):</b></u></h1>
<p><ol>
	<li>Apartment Life Redux</li>
	<li>Sharpshooter Infinite</li>
</ol></p>

Если вы хотите установить свойство только для определенного элемента, вы можете использовать идентификатор элемента, например.

 <div id="foo"><div> //this is in your html
#foo{display:inline;//other styles} //this is part of your css file

Надеюсь, это было полезно

Ответ №2:

Я создал фрагмент кода, который поможет вам решить вашу проблему.

Я добавил display: inline-block , а затем он заканчивается сразу после вашего текста.

Вот так:

 .dashed-border {
  border-style:dashed;
  border-left-width:2px;
  border-right-width:2px;
  border-width:2px;
  border-color:black;
  display:inline;
}

 <h1 class="dashed-border"><b><u>Current Projects (in order of importance):</b></u></h1>
<p><ol>
	<li>Apartment Life Redux</li>
	<li>Sharpshooter Infinite</li>
</ol></p>

1. Я добавил свой код и поместил сообщение post-script в свой op. Пожалуйста, прочтите это и пересмотрите свой фрагмент, так как в моем случае это мне не помогает. (Я действительно новичок в веб-дизайне.)

2. Тогда я не думаю, что правильно понял ваш вопрос. Вы говорите: «Граница простирается до конца страницы, хотя я бы предпочел, чтобы она заканчивалась сразу после окончания текста», и теперь вы обновили свой код, и граница заканчивается сразу после вашего текста?

3. Я хочу, чтобы граница текста заканчивалась сразу после текста, но я хочу, чтобы это был одноразовый случай. Код, который вы мне дали, сделал бы так, чтобы каждый раз, когда я использую тег <div> и <p> , он был бы подчеркнут и имел границу.