Как ввести правое поле абзаца с рамкой

Question

Как ввести правое поле абзаца с рамкой

0

(Это вопрос о CSS/HTML.)

Если у меня есть однострочный абзац, который не распространяется на правый край, и я превратил его в текстовое поле, установив границу вокруг него, как я могу сохранить эту границу от расширения до нужного края?

<p style="border: 1px solid black;">
This is a test.
</p>

выглядит так:

+-----------------------------------------------------------------------------+
| This is a test.                                                             |
+-----------------------------------------------------------------------------+

когда я хочу, чтобы это выглядело так (без меня, чтобы догадаться о жестком кодировании - справа):

+-----------------+
| This is a test. |
+-----------------+

Я говорю здесь, конечно, от ориентации слева направо (так, не на иврите или на арабском).

Большое спасибо за вашу помощь.

Russ Bateman 17 сен. 2013, в 23:55

Источник

Теги:

html

css

4 ответа

1

попробуй это

<p>
<span style="border: 1px solid black;">This is a test.</span>
</p>

PA. 17 сен. 2013, в 19:57

1

Вы можете попробовать это (предупреждение: не будет работать на IE7):

<p id='yourPara'>
    This is a test.
</p>

CSS

#yourPara {
    border: 1px solid black;
    display: inline-block;
}

Если вы не хотите изменять display значение p, то либо используйте другой элемент, который по умолчанию имеет inline либо обертывает текст в p с помощью встроенного элемента (например, span, например) и помещает на него границу.

JSFiddle

Doorknob 17 сен. 2013, в 19:47

1

То, что я хотел бы сделать, это поплавать абзацами, а затем очистить их:

p.neatBox {
    float: left;
    clear: both;
    padding: 5px;
    border: 1px solid blue;
}

См. Например: http://jsfiddle.net/audetwebdesign/8GbkJ/

Преимущество здесь в том, что вам не нужно беспокоиться о inline-block следующих друг за другом, и, возможно, появляющихся по две или более строк.

Единственное, на что нужно обратить внимание, это то, что поля не рушатся на плавающих элементах, поэтому вам нужно установить верхнее поле или нижнее поле для управления интервалом между абзацами.

Marc Audet 17 сен. 2013, в 18:51

Ещё вопросы

avrahamcool · Accepted Answer · 2013-09-17T18-53-00.000Z

просто используйте display: inline-block; на этом элементе. + примените свою границу.