douhan4812 2015-08-10 10:02
浏览 80
已采纳

如何水平对齐联系人列表？

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&amp;subset=latin%2Clatin-ext&amp;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&amp;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">&lt;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”&gt;&lt;iframe&gt;</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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;d=mm&amp;r=g" srcset="http://0.gravatar.com/avatar/38dfa45c2105c434c6665e05e20621cc?s=52&amp;d=mm&amp;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&amp;d=mm&amp;r=g" srcset="http://0.gravatar.com/avatar/38dfa45c2105c434c6665e05e20621cc?s=128&amp;d=mm&amp;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&amp;_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&amp;_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?

  • 写回答

2条回答 默认 最新

  • ds15812330851 2015-08-10 10:15
    关注

    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.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 请问这个是什么意思？
  • ¥15 STM32驱动继电器
  • ¥15 Windows server update services
  • ¥15 关于#c语言#的问题：我现在在做一个墨水屏设计，2.9英寸的小屏怎么换4.2英寸大屏
  • ¥15 模糊pid与pid仿真结果几乎一样
  • ¥15 java的GUI的运用
  • ¥15 我想付费需要AKM公司DSP开发资料及相关开发。
  • ¥15 怎么配置广告联盟瀑布流
  • ¥15 Rstudio 保存代码闪退
  • ¥20 win系统的PYQT程序生成的数据如何放入云服务器阿里云window版？