I'm using a source code that shows a vertically align contacts by default but I would like to change them to a horizontal align behavior.
I have tried the CSS display:inline-block; option but nothing made it change.
So thinking further it might be an option on PHP but I don't have how to make the right changes to my PHP source code function.
PHP
The next source of code is just the function code that I believe I must change to have this behavior.
// Return an HTML string of the design of people list for each user
function wpapl_people_list_single_user_html( $userID ) {
$user = wpapl_get_academic_user_info( $userID );
$siteurl = get_option('siteurl');
$photo = wpapl_get_user_photo_uri( $userID );
$html = '
<div class="wpapl-person">
<div class="wpapl-image"><img src="' . $photo->uri . '" width="' . $photo->width . '" height="' . $photo->height . '" /></div>
<div class="wpapl-mininum-information">
<h4><span class="wpapl-person-name">' . $user->full_name . '</span></h4>
<p><span class="wpapl-people-individual-tag">Job:</span> ' . $user->current_job . '<br />
<span class="wpapl-people-individual-tag">Website:</span> ' . makeClickableLinks( $user->url ) . '<br />
<span class="wpapl-people-individual-tag">Email:</span> ' . makeClickableLinks( $user->academic_email ) . '</p>
<a href="' . wpapl_get_user_profile_uri( $user->userID ) . '">Details...</a>
</div>
</div><br/>
';
return $html;
}
CSS
The next source of code is the entire source of code from the style sheet used to this example.
.wpa label {
float: left;
width: 17em;
margin-right: 1em;
}
.wpapl-person {
font-size: 1em;
}
.wpapl-person .wpapl-image {
float: left;
padding-right: 5px;
}
#wpapl-category-list-navmenu ul {
list-style-type:none;
padding:5px 0 5px 0;
border-top:1px solid #E0E0E0;
border-bottom:1px solid #E0E0E0;
margin:10px 0;
}
#wpapl-category-list-navmenu li {
display: inline;
margin:0 10px;
text-transform:capitalize;
}
.wpapl-people-detail-tag {
font-weight: bold;
}
.wpapl-people-individual-tag {
font-weight: bold;
}
.wpapl-project-minititle, .wpapl-publication-minititle {
letter-spacing: 1ex;
font-size: 1em;
position: relative;
top: 1.5em;
font-variant: small-caps;
}
#wpapl-publications-list-top h3, #wpapl-people-list-top h3 {
font-variant: small-caps;
}
.wpapl-publication-detail h4 {
text-transform: capitalize;
}
HTML
Outputted HTML code.
<html lang="en-US"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="http://localhost:8888/wordpresstest/xmlrpc.php">
<!--[if lt IE 9]>
<script src="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/js/html5.min.js"></script>
<![endif]-->
<title>People | INESC-ID | IIS | VIMMI</title>
<link rel="alternate" type="application/rss+xml" title="INESC-ID | IIS | VIMMI » Feed" href="http://localhost:8888/wordpresstest/feed/">
<link rel="alternate" type="application/rss+xml" title="INESC-ID | IIS | VIMMI » Comments Feed" href="http://localhost:8888/wordpresstest/comments/feed/">
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/localhost:8888\/wordpresstest\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.4"}};
!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script><script src="http://localhost:8888/wordpresstest/wp-includes/js/wp-emoji-release.min.js?ver=4.2.4" type="text/javascript"></script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel="stylesheet" id="wpapl-style-css" href="http://localhost:8888/wordpresstest/wp-content/plugins/wp-academic-people/style.css?ver=4.2.4" type="text/css" media="all">
<link rel="stylesheet" id="open-sans-css" href="//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=4.2.4" type="text/css" media="all">
<link rel="stylesheet" id="dashicons-css" href="http://localhost:8888/wordpresstest/wp-includes/css/dashicons.min.css?ver=4.2.4" type="text/css" media="all">
<link rel="stylesheet" id="admin-bar-css" href="http://localhost:8888/wordpresstest/wp-includes/css/admin-bar.min.css?ver=4.2.4" type="text/css" media="all">
<link rel="stylesheet" id="wp-cards-css" href="http://localhost:8888/wordpresstest/wp-content/plugins/wp-cards/includes/css/components.css?ver=1438026764" type="text/css" media="screen">
<link rel="stylesheet" id="bootstrap-styles-css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css" media="all">
<link rel="stylesheet" id="accesspresslite-google-fonts-css" href="//fonts.googleapis.com/css?family=Open+Sans%3A400%2C400italic%2C300italic%2C300%2C600%2C600italic%7CLato%3A400%2C100%2C300%2C700&ver=4.2.4" type="text/css" media="all">
<link rel="stylesheet" id="accesspresslite-font-awesome-css" href="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/css/font-awesome.min.css?ver=4.2.4" type="text/css" media="all">
<link rel="stylesheet" id="accesspresslite-fancybox-css-css" href="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/css/nivo-lightbox.css?ver=4.2.4" type="text/css" media="all">
<link rel="stylesheet" id="accesspresslite-bx-slider-style-css" href="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/css/jquery.bxslider.css?ver=4.2.4" type="text/css" media="all">
<link rel="stylesheet" id="accesspresslite-woo-commerce-style-css" href="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/css/woocommerce.css?ver=4.2.4" type="text/css" media="all">
<link rel="stylesheet" id="accesspresslite-font-style-css" href="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/css/fonts.css?ver=4.2.4" type="text/css" media="all">
<link rel="stylesheet" id="accesspresslite-style-css" href="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/style.css?ver=4.2.4" type="text/css" media="all">
<link rel="stylesheet" id="accesspresslite-responsive-css" href="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/css/responsive.css?ver=4.2.4" type="text/css" media="all">
<script type="text/javascript" src="http://localhost:8888/wordpresstest/wp-includes/js/jquery/jquery.js?ver=1.11.2"></script>
<script type="text/javascript" src="http://localhost:8888/wordpresstest/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8888/wordpresstest/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost:8888/wordpresstest/wp-includes/wlwmanifest.xml">
<meta name="generator" content="WordPress 4.2.4">
<link rel="canonical" href="http://localhost:8888/wordpresstest/people/">
<link rel="shortlink" href="http://localhost:8888/wordpresstest/?p=54">
<style type="text/css"><iframe src=”https://www.google.pt/maps/place/R.+Alves+Redol+9,+1049-001+Lisboa/@38.7363562,-9.1407662,17z/data=!3m1!4b1!4m2!3m1!1s0xd1933a1834b16ef:0x6d0bf6f533f05514”><iframe></style> <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
html { margin-top: 32px !important; }
* html body { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
* html body { margin-top: 46px !important; }
}
</style>
</head>
<body class="page page-id-54 page-template-default logged-in admin-bar no-sidebar customize-support" data-pinterest-extension-installed="cr1.38.3">
<div id="page" class="site">
<header id="masthead" class="site-header">
<div id="top-header">
<div class="ak-container">
<div class="site-branding">
<a href="http://localhost:8888/wordpresstest/">
<img src="http://localhost:8888/wordpresstest/wp-content/uploads/2015/08/cropped-cropped-cropped-II07.png" alt="INESC-ID | IIS | VIMMI">
</a>
</div><!-- .site-branding -->
<div class="right-header clearfix">
<div class="clearfix"></div>
<div class="socials">
</div>
<div class="ak-search">
<form method="get" class="searchform" action="http://localhost:8888/wordpresstest/" role="search">
<input type="text" name="s" value="" class="s" placeholder="Search...">
<button type="submit" name="submit" class="searchsubmit"><i class="fa fa-search"></i></button>
</form>
</div>
</div><!-- .right-header -->
</div><!-- .ak-container -->
</div><!-- #top-header -->
<nav id="site-navigation" class="main-navigation menu-right">
<div class="ak-container">
<h1 class="menu-toggle"></h1>
<div class="menu-vimmi-menu-container"><ul id="menu-vimmi-menu" class="menu"><li id="menu-item-72" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-72"><a href="http://localhost:8888/wordpresstest/">Home</a></li>
<li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a title="About" href="http://localhost:8888/wordpresstest/about/">About</a></li>
<li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-54 current_page_item menu-item-74"><a title="People" href="http://localhost:8888/wordpresstest/people/">People</a></li>
<li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107"><a href="http://localhost:8888/wordpresstest/news/">News</a></li>
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a title="Publications" href="http://localhost:8888/wordpresstest/publications/">Publications</a></li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-76"><a title="Projects" href="http://localhost:8888/wordpresstest/projects/">Projects</a>
<ul class="sub-menu">
<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a title="Present" href="http://localhost:8888/wordpresstest/projects/present/">Present</a></li>
<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a title="Past" href="http://localhost:8888/wordpresstest/projects/past/">Past</a></li>
</ul>
</li>
</ul></div> </div>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
<section id="slider-banner">
</section><!-- #slider-banner -->
<div id="content" class="site-content">
<div class="ak-container">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<article id="post-54" class="post-54 page type-page status-publish hentry">
<header class="entry-header">
<h1 class="entry-title">People</h1>
</header><!-- .entry-header -->
<div class="entry-content">
<div id="wpapl-people-list-top"><div id="wpapl-category-list-navmenu"><ul><li><a href="http://localhost:8888/wordpresstest/people/?cat=1">Senior Researchers</a></li><li><a href="http://localhost:8888/wordpresstest/people/?cat=2">Researchers</a></li><li><a href="http://localhost:8888/wordpresstest/people/?cat=3">Associate Researchers</a></li><li><a href="http://localhost:8888/wordpresstest/people/?cat=4">Junior Researchers</a></li><li><a href="http://localhost:8888/wordpresstest/people/?cat=5">Trainees</a></li></ul></div><h3></h3>
<div class="wpapl-person">
<div class="wpapl-image"><img src="http://localhost:8888/wordpresstest/wp-content/uploads/userphoto/1.thumbnail.png" width="80" height="80"></div>
<div class="wpapl-mininum-information">
<h4><span class="wpapl-person-name">Francisco Maria Calisto</span></h4>
<p><span class="wpapl-people-individual-tag">Job:</span> Front-end Software Developer<br>
<span class="wpapl-people-individual-tag">Website:</span> <a href="http://www.franciscocalisto.me/">http://www.franciscocalisto.me/</a><br>
<span class="wpapl-people-individual-tag">Email:</span> <a href="mailto:francisco.calisto@tecnico.ulisboa.pt">francisco.calisto@tecnico.ulisboa.pt</a></p>
<a href="http://localhost:8888/wordpresstest/people/?wpapl_id=1">Details...</a>
</div>
</div><br>
<div class="wpapl-person">
<div class="wpapl-image"><img src="http://localhost:8888/wordpresstest/wp-content/uploads/userphoto/2.thumbnail.png" width="80" height="80"></div>
<div class="wpapl-mininum-information">
<h4><span class="wpapl-person-name">Daniel Gonçalves</span></h4>
<p><span class="wpapl-people-individual-tag">Job:</span> Senior Researcher<br>
<span class="wpapl-people-individual-tag">Website:</span> <a href="http://danielgoncalves.info">http://danielgoncalves.info</a><br>
<span class="wpapl-people-individual-tag">Email:</span> <a href="mailto:daniel.goncalves@inesc-id.pt">daniel.goncalves@inesc-id.pt</a></p>
<a href="http://localhost:8888/wordpresstest/people/?wpapl_id=2">Details...</a>
</div>
</div><br>
<div class="wpapl-person">
<div class="wpapl-image"><img src="http://localhost:8888/wordpresstest/wp-content/uploads/userphoto/3.thumbnail.jpg" width="79" height="80"></div>
<div class="wpapl-mininum-information">
<h4><span class="wpapl-person-name">Joaquim Armando Pires Jorge</span></h4>
<p><span class="wpapl-people-individual-tag">Job:</span> Senior Researcher<br>
<span class="wpapl-people-individual-tag">Website:</span> <a href="http://web.ist.utl.pt/jorgej/">http://web.ist.utl.pt/jorgej/</a><br>
<span class="wpapl-people-individual-tag">Email:</span> <a href="mailto:jaj@inesc-id.pt">jaj@inesc-id.pt</a></p>
<a href="http://localhost:8888/wordpresstest/people/?wpapl_id=3">Details...</a>
</div>
</div><br>
</div>
</div><!-- .entry-content -->
<footer class="entry-footer"><span class="edit-link"><a class="post-edit-link" href="http://localhost:8888/wordpresstest/wp-admin/post.php?post=54&action=edit">Edit</a></span></footer></article><!-- #post-## -->
</main><!-- #main -->
</div><!-- #primary -->
</div>
</div><!-- #content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div id="bottom-footer">
<div class="ak-container">
<h1 class="site-info">
<span class="sep"> Developed by </span>
<a href="http://franciscocalisto.me/" title="FMCalisto" target="_blank">Francisco Maria Calisto</a>
</h1><!-- .site-info -->
<div class="copyright">
Copyright © 2015 <a href="http://localhost:8888/wordpresstest">
INESC-ID | IIS | VIMMI </a>
, Theme by
<a href="http://accesspressthemes.com/" title="APL" target="_blank">AccessPress Lite</a>
</div>
</div>
</div>
</footer><!-- #colophon -->
</div><!-- #page -->
<script type="text/javascript" src="http://localhost:8888/wordpresstest/wp-includes/js/admin-bar.min.js?ver=4.2.4"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/js/jquery.bxslider.min.js?ver=4.1"></script>
<script type="text/javascript" src="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/js/nivo-lightbox.min.js?ver=2.1"></script>
<script type="text/javascript" src="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/js/jquery.actual.min.js?ver=1.0.16"></script>
<script type="text/javascript" src="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/js/skip-link-focus-fix.js?ver=20130115"></script>
<script type="text/javascript" src="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/js/custom.js?ver=1.1"></script>
<script type="text/javascript">
(function() {
var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');
request = true;
b[c] = b[c].replace( rcs, ' ' );
b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
}());
</script>
<div id="wpadminbar" class="">
<a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a>
<div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Toolbar" tabindex="0">
<ul id="wp-admin-bar-root-default" class="ab-top-menu">
<li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wordpresstest/wp-admin/about.php"><span class="ab-icon"></span><span class="screen-reader-text">About WordPress</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-wp-logo-default" class="ab-submenu">
<li id="wp-admin-bar-about"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/about.php">About WordPress</a> </li></ul><ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu">
<li id="wp-admin-bar-wporg"><a class="ab-item" href="https://wordpress.org/">WordPress.org</a> </li>
<li id="wp-admin-bar-documentation"><a class="ab-item" href="https://codex.wordpress.org/">Documentation</a> </li>
<li id="wp-admin-bar-support-forums"><a class="ab-item" href="https://wordpress.org/support/">Support Forums</a> </li>
<li id="wp-admin-bar-feedback"><a class="ab-item" href="https://wordpress.org/support/forum/requests-and-feedback">Feedback</a> </li></ul></div> </li>
<li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wordpresstest/wp-admin/">INESC-ID | IIS | VIMMI</a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-site-name-default" class="ab-submenu">
<li id="wp-admin-bar-dashboard"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/">Dashboard</a> </li></ul><ul id="wp-admin-bar-appearance" class="ab-submenu">
<li id="wp-admin-bar-themes" class="hide-if-customize"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/themes.php">Themes</a> </li>
<li id="wp-admin-bar-customize-themes" class="hide-if-no-customize"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%3A8888%2Fwordpresstest%2Fpeople%2F&autofocus%5Bsection%5D=themes">Themes</a> </li>
<li id="wp-admin-bar-customize" class="hide-if-no-customize"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%3A8888%2Fwordpresstest%2Fpeople%2F">Customize</a> </li>
<li id="wp-admin-bar-widgets" class="hide-if-customize"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/widgets.php">Widgets</a> </li>
<li id="wp-admin-bar-customize-widgets" class="hide-if-no-customize"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%3A8888%2Fwordpresstest%2Fpeople%2F&autofocus%5Bpanel%5D=widgets">Widgets</a> </li>
<li id="wp-admin-bar-menus"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/nav-menus.php">Menus</a> </li>
<li id="wp-admin-bar-background" class="hide-if-customize"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/themes.php?page=custom-background">Background</a> </li>
<li id="wp-admin-bar-customize-background" class="hide-if-no-customize"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%3A8888%2Fwordpresstest%2Fpeople%2F&autofocus%5Bcontrol%5D=background_image">Background</a> </li>
<li id="wp-admin-bar-header" class="hide-if-customize"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/themes.php?page=custom-header">Header</a> </li>
<li id="wp-admin-bar-customize-header" class="hide-if-no-customize"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%3A8888%2Fwordpresstest%2Fpeople%2F&autofocus%5Bcontrol%5D=header_image">Header</a> </li></ul></div> </li>
<li id="wp-admin-bar-comments"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/edit-comments.php" title="0 comments awaiting moderation"><span class="ab-icon"></span><span id="ab-awaiting-mod" class="ab-label awaiting-mod pending-count count-0">0</span></a> </li>
<li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wordpresstest/wp-admin/post-new.php"><span class="ab-icon"></span><span class="ab-label">New</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-new-content-default" class="ab-submenu">
<li id="wp-admin-bar-new-post"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/post-new.php">Post</a> </li>
<li id="wp-admin-bar-new-media"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/media-new.php">Media</a> </li>
<li id="wp-admin-bar-new-page"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/post-new.php?post_type=page">Page</a> </li>
<li id="wp-admin-bar-new-user"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/user-new.php">User</a> </li></ul></div> </li>
<li id="wp-admin-bar-edit"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/post.php?post=54&action=edit">Edit Page</a> </li></ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
<li id="wp-admin-bar-search" class="admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="http://localhost:8888/wordpresstest/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150"><label for="adminbar-search" class="screen-reader-text">Search</label><input type="submit" class="adminbar-button" value="Search"></form></div> </li>
<li id="wp-admin-bar-my-account" class="menupop with-avatar"><a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wordpresstest/wp-admin/profile.php">Howdy, FMCalisto<img alt="" src="http://0.gravatar.com/avatar/38dfa45c2105c434c6665e05e20621cc?s=26&d=mm&r=g" srcset="http://0.gravatar.com/avatar/38dfa45c2105c434c6665e05e20621cc?s=52&d=mm&r=g 2x" class="avatar avatar-26 photo" height="26" width="26"></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-user-actions" class="ab-submenu">
<li id="wp-admin-bar-user-info"><a class="ab-item" tabindex="-1" href="http://localhost:8888/wordpresstest/wp-admin/profile.php"><img alt="" src="http://0.gravatar.com/avatar/38dfa45c2105c434c6665e05e20621cc?s=64&d=mm&r=g" srcset="http://0.gravatar.com/avatar/38dfa45c2105c434c6665e05e20621cc?s=128&d=mm&r=g 2x" class="avatar avatar-64 photo" height="64" width="64"><span class="display-name">FMCalisto</span></a> </li>
<li id="wp-admin-bar-edit-profile"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/profile.php">Edit My Profile</a> </li>
<li id="wp-admin-bar-logout"><a class="ab-item" href="http://localhost:8888/wordpresstest/wp-login.php?action=logout&_wpnonce=e4d49389f5">Log Out</a> </li></ul></div> </li></ul> </div>
<a class="screen-reader-shortcut" href="http://localhost:8888/wordpresstest/wp-login.php?action=logout&_wpnonce=e4d49389f5">Log Out</a>
</div>
<script type="text/javascript">(function () {
return window.SIG_EXT = {};
})()</script><signals-overlay style="display: none;"><signals-mini-overlay><signals-icon class="icon-sidekick"></signals-icon></signals-mini-overlay><signals-mini-close></signals-mini-close></signals-overlay><span style="height: 20px; width: 40px; position: absolute; opacity: 0.85; z-index: 8675309; display: none; cursor: pointer; border: none; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAYAAAD/Rn+7AAADU0lEQVR42s2WXUhTYRjHz0VEVPRFUGmtVEaFUZFhHxBhsotCU5JwBWEf1EWEEVHQx4UfFWYkFa2biPJiXbUta33OXFtuUXMzJ4bK3Nqay7m5NeZq6h/tPQ+xU20zugjOxR/+7/O8539+5znnwMtNTExwJtMb3L/fiLv3botCSmUjeCaejTOb39AiFothfHxcFIrHY8RksZjBsckJcOIRMfFsHD/SsbExUYpnI8DR0dGUGjSb0byhEJp5Uqg5CTSzc2CQleJbMEj9/ywBcGRkJEk9DQqouEVQT1sK444yWI9UonmTjGqauVLEIlHa9x8lAMbj8SSpp0rwKGMVvg8P46vbg0C7na8z8JsMcgHe7jlEa+edRhiLy8n/TUMfu6EvLElk+U0WtGwrTrdfAGQf5J8iiK4LVzDU28t8JtMSocf8E+l68myaNFXm/6rXslLK7ay5TOunuRvZWpJuvwAYjUaTpOIWoquuAZ219RTaxKYp9BbjycoN5FvL9qH9TBX5rvoGdJythvXYSTxdtRnWylO/ZdqrLsGwszzhWQ593z2KlAwCYCQSSZJ6ehZ0W7bD9VBLgN0NCqr3qR7R2rBrL3pu3Sb/7nDlz2uy6cG0OXk0GTbZXzNp8trsPAQdTj6frlWzN2DcXZGKQQAMh8NJ6rpyHe+PnkCr/CAFdZyvpfpjuvkifLF9wIt1Wwlo0OHie1RvWrKa93RjzfzliTzPKz3ltB0/Tevmwp14wGUgHAzSOoUEwFAolFaaBSuhnslPRkJexUJtZ6v5HtUeLswl33n1BgEY5fvhs9sJ3FAiT+QYyyvoAQJuD0KBAFRTJNAuz5/s3gJgMBhMJwrVFRThM5tY5zUF/A4X1f2fvQTRLCuBreoim0YmAbqNJryvPEXeeq46kaNdkQ/1HCncbJKPs9ZSv2VHGfWsZ2hfkhKAfr8/pdxWKx4wwD69PmVfNSOL+lr2w+gYqHpWDtXt1xQ8AMlWU0e1lqLd/APRHoP8AJqWrQG9gYxcPMsvSJUvAA4MDKTUJ7MZLaVy8v+qT21tcDx/OemePr0RTkNrur4A6PP5xCgBsL+/X4wiQDpuuVxOeL1eMYmYeDY6sOp0z+B0OuHxeEQhxkJMFosJiSO/UinOI/8Pc+l7KKArAT8AAAAASUVORK5CYII=); background-color: transparent;"></span></body></html>
I'm not sure how to achieve this though and how to solve my problem?
Can anyone suggest how to change the code and most importantly why your solution works?
If you change the display type of your div.wpapl-person to inline-block, that should deliver the correct behaviour, were it not that you add <br/> after each of those divs, thus breaking the line of inline-parts to several lines. Remove that bit and it will work.
$html = '
<div class="wpapl-person">
<div class="wpapl-image"><img src="' . $photo->uri . '" width="' . $photo->width . '" height="' . $photo->height . '" /></div>
<div class="wpapl-mininum-information">
<h4><span class="wpapl-person-name">' . $user->full_name . '</span></h4>
<p><span class="wpapl-people-individual-tag">Job:</span> ' . $user->current_job . '<br />
<span class="wpapl-people-individual-tag">Website:</span> ' . makeClickableLinks( $user->url ) . '<br />
<span class="wpapl-people-individual-tag">Email:</span> ' . makeClickableLinks( $user->academic_email ) . '</p>
<a href="' . wpapl_get_user_profile_uri( $user->userID ) . '">Details...</a>
</div>
</div>
';
return $html;
Notice the fact that <br> after the </div> is left out for the reason I stated above.
I can hardly imagine what you try to achieve, please add the output or html code. But perhaps this will work:
display: block;
float: left;
if you give the items a width they should turn into horizontal alignment.