html - How would I make it so that a border only spans a certain length, on one side? -




how make border spans length, on 1 side? tried

<ul id = 'list'>     <li class = 'list-item'>example1</li>     <li class = 'list-item'>example2</li>     <li class = 'list-item'>example3</li> </ul> 

and css:

<style> #list{   list-style-type:none;   display:inline; } .list-item{  float:left;  border-left:solid 5px red;  } </style> 

the way have border take part of width or height of element make use of two elements - parent , child (or element absolutely-positioned).

vertical borders should specified on element smaller height, , horizontal borders should specified on element smaller width.

this can seen in following example:

#div1 {    height: 200px;    width: 100px;    border-top: 5px solid red;  }    #div2 {    height: 100px;    width: 200px;    padding-left: 5px;    border-left: solid 5px red;  }
<div id="div1">    <div id="div2">lorem ipsum dolor sit amet, consectetur adipiscing elit. integer et ex sed mi luctus luctus sed sed mauris. cras pretium nisi non odio rhoncus, id viverra erat rutrum. vivamus congue ultrices sem maximus tempor. suspendisse in est gravida, elementum lorem eget, tincidunt urna.</div>  </div>

hope helps! :)





wiki

Comments

Popular posts from this blog

Asterisk AGI Python Script to Dialplan does not work -

python - Read npy file directly from S3 StreamingBody -

kotlin - Out-projected type in generic interface prohibits the use of metod with generic parameter -