Я хотел бы иметь строку, которая начинается сразу же после того, как мой текст на ту же строку, я попытался с помощью следующего простого кодалинии сразу после текста
<html><body>My Text<hr/></body></html>
Кажется, что <hr> не вариант потому что он всегда находится на новой строке, и я хочу, чтобы строка начиналась справа от моего текста.
Любая помощь?
hr {
width: {so it fits on the same line as the p tag};
}
p {
float: left;
width: {enough to accomodate the hr};
}
Этот вид смысла?
<p>My text</p>
<hr />
Попробуйте это:
<html><body>My Text<hr style="float: right; width: 80%"/></body></html>
Рядный CSS float: right будет держать его на той же строке, что и текст. Вам нужно будет настроить width, если вы хотите, чтобы он заполнил остальную часть линии.
Использование inline или float, насколько я проверял, он не работает должным образом, даже если это была моя первая мысль. Заглядывая я использовал следующий CSS
hr {
bottom: 17px;
position: relative;
z-index: 1;
}
div {
background:white;
position: relative;
width: 100px;
z-index: 10;
}
HTML
<div>My Text</div><hr/>
Демоhttp://jsfiddle.net/mFEWk/
То, что я сделал, чтобы добавить положение относительно обоих элементов (чтобы дать мне преимущество z-index). Также с того момента, как у меня было position:relative для hr, я переместил его с bottom:17px. Это перемещает его выше div, в котором содержится текст. Применяя значения z-index и добавляя background:white для div, выкладываем текст над линией. Конечно, не забудьте использовать текст width для текста, иначе возьмем всю ширину родительского элемента.
У модели <hr> есть стиль по умолчанию, который помещает его в новую строку. Однако этот стиль по умолчанию может быть перегружен, так же как и для любого другого элемента. <hr> - это не что иное, как пустой <div> с настройкой границы по умолчанию.
Чтобы продемонстрировать это, попробуйте следующее:
<div>Blah blah<hr style='display:inline-block; width:100px;' />dfgdfg</div>
Есть несколько способов, чтобы переопределить стилизации <hr> для того чтобы достигнуть своей цели.
Вы можете попробовать использовать display:inline-block; вместе с настройкой width, так как у меня выше. Нижняя сторона этого подхода состоит в том, что он требует, чтобы вы знали нужную ширину, хотя есть способы обойти это: width:100%;, и вся строка в контейнере <div>, которая имеет overflow:hidden;, может сделать трюк, например:
<div style='overflow:hidden; white-space:nowrap;'>Blah blah<hr style='display:inline-block; width:100%;' /></div>
Другой вариант - использовать float:left;.Вам нужно применить это ко всем элементам строки, и мне это не нравится, поскольку я обнаружил, что float имеет тенденцию вызывать больше проблем, чем решает. Но попробуйте и посмотрите, работает ли это для вас.
Существуют различные комбинации стилей, которые вы можете попробовать - дайте ему понять, что работает.
@ Никко Это хорошо работает. Должен приниматься как ответ. –
Вот один из возможных подходов, но в нем есть некоторые предположения/требования. Ваш вопрос должен быть отредактирован, чтобы дать более конкретную информацию о том, что вы строите.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Blah</title>
<style type="text/css">
body {
background-color : white;
font-family : Arial;
font-size : 16px;
}
.wrap {
background: transparent url(px.png) repeat-x 0px 85%;
/* Different fonts or text sizes may require tweaking of that offset.
px.png is a one-pixel(though can be thicker if needed) image in whatever color you want the line */
}
.inner {
background-color : white;
/* Should match the background of whatever it's sitting over.
Obviously this requires a solid background. */
}
</style>
</head>
<body>
<div class="wrap"><span class="inner">Here is some text</span></div>
</body>
</html>
Я использовал следующую методику:
Дайте контейнер DIV на фоновое изображение с горизонтальной линией. Поместите элемент (например) в контейнере DIV (я его на правом так поплавка: справа;)
Используйте следующий CSS:
.line-container { width: 550px; margin-top: 10px; background-image: url('/images/horizontal_line.png'); height: 40px; }
.line-container h3 { float: right; background-color: white; padding-left: 10px; }
Использование Flexbox собственности это может быть легко достигнуто.
.mytextdiv{
display:flex;
flex-direction:row;
align-items: center;
}
.mytexttitle{
flex-grow:0;
}
.divider{
flex-grow:1;
height: 1px;
background-color: #9f9f9f;
}<div class="mytextdiv">
<div class="mytexttitle">
My Text
</div>
<div class="divider"></div>
</div><div style="float: left">Some text</div>
<hr style="clear: none; position: relative; top: 0.5em;">именно то, что вы хотите.
Попробуйте это. Он работает
<p style="float:left;">
Hello Text
<hr style="float:left; width: 80%"/>
</p>
Вы также можете использовать это, чтобы нарисовать линию между текстом как
Здравствуйте ------------------------ - Здравствуйте,
OP никогда не указывал цель линии, но я хотел поделиться тем, что я делал, когда создавал html-шаблон, где пользователю нужна строка для записи после того, как документ был напечатан.
Поскольку тег hr по умолчанию имеет собственную строку и по умолчанию является центром в строке, я решил использовать div и стиль вместо него.
HTML
This is my text.<div class='fillLine'></div>
CSS
.fillLine {
display:inline-block;
width: 200px;
border-bottom: 1px solid black;
}
JSFiddle Demo
Надеюсь, что это поможет любому, у кого была такая же цель, как и я.
Какова цель этой линии? Причина, по которой HR появляется ниже (по умолчанию), заключается в том, что это все: этот тег должен указывать на разделитель. Если линия, которую вы пытаетесь достичь, просто декоративна, есть более подходящие способы приблизиться к ней. (Я делаю снимок ниже.) В этом вопросе также есть небольшая свобода интерпретации; вам может понадобиться добавить изображение именно того, что вы подразумеваете под «на одной строке». –