CODEWITHSUNDEEP
htmlcss
user3066560
user3066560

Reputation: 35

What is the way to ''tab'' in HTML/CSS?

I have 2 segments of text which I want to appear on the same line and then a vertical line between them like so:

blablablalbalblalbasldasd spacespacespacespace l spacespacespacespace blablablalbalbal

Sorry for the horrid example, but I'm not sure how to make multiple spaces here. The l in the middle is the verticle line intended.

Now one of my ideas would be to use the "tab" function in Microsoft word, but I don't know how to use that in HTML. As for the vertical line, I'm thinking perhaps putting a left border around the right segment of text?

But for this I need 2 < p > statements and if I make 2 < p > statements, the text appears on individual lines of text.

Any help appreciated!

Upvotes: 0

Views: 637

Answers (3)

user3072059
user3072059

Reputation: 16

You could use a <span> element to style the <p> inline.

Like this:

<p>Blablabla<span class="border_left">bla bla bla<span><p>

<style>
.border_left{
   border-left: 1px solid #000;
}
</style>

Upvotes: 0

showdev
showdev

Reputation: 29168

I suggest that you use a <span> element (which is an inline element) for your separator and CSS margin to add space.

Something like this:

blah blah blah<span class="separator">|</span>blah blah blah

span.separator {
    margin:0 25px;
}

http://jsfiddle.net/D3Zsn/

Edit:

To have more control over the look of the separator, you can use a border (as mentioned by user3072059). However, I'd structure things differently in that situation:

<p>blah blah blah<span class="separator"></span>blah blah blah</p>

p {
    line-height:30px;
    border:1px solid #FAA; /* Show an outline (for debugging purposes) */
}

span.separator {
    border-left:1px solid #000;
    padding:5px 25px 5px 0;
    margin:0 0 0 25px;
}

Tweak the values as necessary to achieve the look you want.

http://jsfiddle.net/D3Zsn/2/

Upvotes: 2

fauverism
fauverism

Reputation: 1992

use the tabindex attr on spans within the < p > element

Upvotes: 0

Related Questions