Home > Back-end >  How to move <dl> to the right?
How to move <dl> to the right?

Time:09-18

was making a website for class and I can't get a hold on how to make dl move to the right. all I see was ul or ol being moved from researching. And all I want for it to do is to be able to move definition list to the right.

    <dl >
            <dt> STARRING </dt>
                <dd> Mako </dd>
                <dd> Sarah Michelle Gellar </dd>
                
            <dt> DIRECTOR </dt>
                <dd> Kevin Munroe </dd>
                
            <dt> RATING </dt>
                <dd> PG </dd>
                
            <dt> THEATRICAL RELEASE </dt>
                <dd> Mar 23,2007 </dd>
                
            <dt> MOVIE SYNOPSIS </dt>
                <dd> After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family. </dd>
    
            <dt> MPAA RATING </dt>
                <dd> PG, for animated action violence, some scary cartoon images and mild language </dd>
    
            <dt> RELEASE COMPANY </dt>
                <dd> Warner Bros </dd>
    
            <dt> GENRE </dt>
                <dd> Action/Adventure, Comedy </dd> 
                <dd> Children, Martial Arts, Superheroes </dd>  
                <dd> Ninjas, Animated Characters </dd>  
                
            <dt> OFFICIAL MOVIE SITE </dt>
                <dd> The Official TMNT Site </dd>
                
        </dl>

    dl.content {
        background-position: right bottom;
        width: 250px;
        background-color: #A2B964;
        padding: 10px 10px 10px 0px;
        margin: 1em 0;
        right: 10%;
        
    }
    
    dt{
        font-size: 8pt;
        font-family: Arial;
        font-weight: bold;
        padding: 1em;
    }
    
    dd{
        font-size: 8pt;
        font-family: Arial;
    }

CodePudding user response:

For more information, please see the comments in CSS. You can also do a test it here: https://jsfiddle.net/UtmostCreator/r4yqdptw/

Read more about margin-left here, and w3.org link

dl.content {
  max-width: 200px; /* limit the container size */
  margin-left: auto; /* to push it to the right side */
}
<dl >
            <dt> STARRING </dt>
                <dd> Mako </dd>
                <dd> Sarah Michelle Gellar </dd>
                
            <dt> DIRECTOR </dt>
                <dd> Kevin Munroe </dd>
                
            <dt> RATING </dt>
                <dd> PG </dd>
                
            <dt> THEATRICAL RELEASE </dt>
                <dd> Mar 23,2007 </dd>
                
            <dt> MOVIE SYNOPSIS </dt>
                <dd> After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family. </dd>
    
            <dt> MPAA RATING </dt>
                <dd> PG, for animated action violence, some scary cartoon images and mild language </dd>
    
            <dt> RELEASE COMPANY </dt>
                <dd> Warner Bros </dd>
    
            <dt> GENRE </dt>
                <dd> Action/Adventure, Comedy </dd> 
                <dd> Children, Martial Arts, Superheroes </dd>  
                <dd> Ninjas, Animated Characters </dd>  
                
            <dt> OFFICIAL MOVIE SITE </dt>
                <dd> The Official TMNT Site </dd>
                
        </dl>

  • Related