我使用的源代码默认显示垂直对齐的联系人，但我想将它们更改为水平对齐行为。
我尝试过CSS display:inline-block;选项但没有任何改变。
因此，进一步思考它可能是PHP的一个选项，但我没有如何对我的PHP源代码函数进行正确的更改。
PHP
下一个代码源只是功能代码，我认为必须更改才能发生此行为。
// 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
下一个代码源是本例中使用的样式表中的完整代码源。
.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
输出的HTML代码。
<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>
我不知道如何实现这个目标以及如何解决我的问题？
有人可以建议如何更改代码，最重要的是你的解决方案有效吗？
答案 0 :(得分：2)
如果您将div.wpapl-person的显示类型更改为inline-block，那么应该提供正确的行为，是否在每个div之后添加<br/>，从而打破了内联零件线到几条线。删除该位，它将工作。
$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;
请注意<br>之后的</div>因我上述原因而遗漏的事实。
答案 1 :(得分：1)
我很难想象你想要实现的目标，请添加输出或html代码。 但也许这会奏效：
display: block;
float: left;
如果你给项目一个宽度，他们应该变成水平对齐。