CODEWITHSUNDEEP
htmlcss
Christiaan van Doesburg
Christiaan van Doesburg

Reputation: 21

css / html align left and right in one href

Is there a way to have part of the text align left and the other right and stay in one line? I tried a few similar answers on similar questions but the result isn' close to what I'm hoping for
Example: TANYA RUMPFF left and SONGS OF A BIRD RIGHT within the 440px HTML:

</head>

<div class="dean">
<ul>
  <li><a href="#">TANYA RUMPFF <p align="right">Songs of a bird</p></a></li>
  <li><a href="#">STANCE OONK Bolwerk</a></li>
  <li><a href="#">HARALD VLUGT Voor en na het meesterwerk</a></li>
  <li><a href="#">CORINNE BONSMA Secret garden</a></li>
  <li><a href="#">STEFAN KASPER Glitterkikkerlikker</a></li>
</ul>
</div>

<body>
</body>

the CSS:

.dean {width:440px;
    background-color:#74f4ff;
    }

.dean ul {
    padding-left:-12px;
    list-style-type: none;
    padding-left:0; 
    padding: 0;
}

.dean ul li  {
    list-style-position:inside;
}

.dean a:hover {
    text-decoration:none;
    color:#000;
    background-color:#fff;
}
.dean li:hover{
    margin-left:-14px;
    color:#F90;
    list-style-type:disc;
}
.dean ul a {
    text-decoration:none;
    display:block;
    padding-left:20px;
    width:400px;
    color:#000;
    font-family:Arial, Helvetica, sans-serif;
}

Upvotes: 2

Views: 3056

Answers (2)

m2j
m2j

Reputation: 1160

HTML

<ul>
<div id="textbox">
   <li class="alignleft"><a href="#">TANYA RUMPFF</a></li>
   <li class="alignright"><a href="#">Songs of a bird</a></li>
</div>
<div style="clear: both;"></div>
<div id="textbox">
   <li class="alignleft"><a href="#">STANCE OONK</a></li>
   <li class="alignright"><a href="#">Bolwerk</a></li>
</div>
<div style="clear: both;"></div>
<div id="textbox">
   <li class="alignleft"><a href="#">HARALD VLUGT </a></li>
   <li class="alignright"><a href="#">Voor en na het meesterwerk</a></li>
</div>
<div style="clear: both;"></div>
<div id="textbox">
   <li class="alignleft"><a href="#">CORINNE BONSMA</a></li>
   <li class="alignright"><a href="#">Secret garden</a></li>
</div>
<div style="clear: both;"></div>
</ul>

css

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

try this. it might work

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105853

you may float first element and use text-align:right;

li a{
  display:block;
  text-align: right;
}
li b {
  float: left;
}
<ul>
  <li><a href="#"><b>TANYA RUMPFF</b>Songs of a bird</a>
  </li>
</ul>

Upvotes: 2

Related Questions