Search code examples
htmlwidgetinline

How to display HTML widgeds in line


I'm trying to display four Social Media HTML Widgets in line on my website. I tried a few codes but none worked. Can you please give me some advice?

Here's my code:

https://www.link3.com' target='_center' title='Title1'>https://www.source3.com' style='border:none;max-width:234px;width:234px;' alt="" />https://www.link4.com' target='_center' title='Title1'>https://www.source4.com' style='border:none;max-width:234px;width:234px;' alt="" />


Solution

  • You can do this with CSS, either inline, like below, or in stylesheets etc.

    Try using display: inline-block;

    <div style="display:inline-block;border:none;max-width:234px;width:234px;">
      https://www.source1.com
    </div>
    
    <div style="display:inline-block;border:none;max-width:234px;width:234px;">
      https://www.source2.com
    </div>
    
    <div style="display:inline-block;border:none;max-width:234px;width:234px;">
      https://www.source3.com
    </div>
    
    <div style="display:inline-block;border:none;max-width:234px;width:234px;">
      https://www.source4.com
    </div>
    

    Take a look here: https://www.w3schools.com/css/css_inline-block.asp

    You could also use floats: https://www.w3schools.com/cssref/pr_class_float.asp

    <div style="float:left;border:none;max-width:234px;width:234px;">
      https://www.source4.com
    </div>
    

    div {
      background:black;
      width:234px;
      max-width:234px;
      border:none;
      display:inline-block;
    }
    <div>
      https://www.source1.com
    </div>
    
    <div>
      https://www.source2.com
    </div>
    
    <div>
      https://www.source3.com
    </div>
    
    <div>
      https://www.source4.com
    </div>

    <div style="display:inline-block;border:none;max-width:234px;width:234px;">
        <a href='link1.com' target='_center' title='Title1'>
          <img src='source1.com' style='border:none;max-width:234px;width:234px;' alt="" />
        </a>
    </div>
    <div style="display:inline-block;border:none;max-width:234px;width:234px;">
        <a href='link2.com' target='_center' title='Title1'>
          <img src='source2.com' style='border:none;max-width:234px;width:234px;' alt="" />
        </a>
    </div>
    <div style="display:inline-block;border:none;max-width:234px;width:234px;">
        <a href='link3.com' target='_center' title='Title1'>
          <img src='source3.com' style='border:none;max-width:234px;width:234px;' alt="" />
        </a>
    </div>