How to print out the post titles horizontally？

CMS & WordPress
1

Hi there！

I am customizing wordpress.
I want to print out the post titles horizontally on my top page.
But, it prints out vertically now.

image
image1440×900 268 KB

How to print out the post titles horizontally？
My code is:

<style>
.content {
	  -moz-column-count: 3;
	  -moz-column-gap: 10px;
	  -moz-column-rule: none;
	  -webkit-column-count: 3;
	  -webkit-column-gap: 10px;
	  -webkit-column-rule: none;
	column-count: 3;
	column-gap: 10px;
	column-rule: none;
	}
</style>

 <div class="content">
     <?php while ( $allPostsWPQuery->have_posts() ) : $allPostsWPQuery->the_post(); ?>
	
	 <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
       
    <?php endwhile; ?>
</div>
     <?php wp_reset_postdata(); ?>
 <?php else : ?>
    <p><?php _e( 'There no posts to display.' ); ?></p>
<?php endif; ?>

How to improve my code?

2

https://perishablepress.com/two-column-horizontal-sequence-wordpress-post-order/

3

Are you saying this has solved your issue @zhuceyouxiang88?

4

Partially solved.

image
image1440×900 262 KB

5

Hi,
I see that you have made a list of the post titles, now being semantically correct. :+1:

Without updated code, or an image of what you want, it’s a guessing game to advise how you could get the post titles show horizontally. Hope I understand correctly what you want to achive. :slightly_smiling_face:

Taking your OP code and change it to achieve the horizontal display with the post titles adjacent each other in rows, breaking to new lines when needed. The list items will lose their style type when not displayed as default list items, so I suggest a pseudo element shaped as an item marker. Its content could otherwise be a font icon if the page has an icon-font loaded.

CSS:

.content {
	-moz-column-count: 3;
	-moz-column-gap: 10px;
	-moz-column-rule: none;
	-webkit-column-count: 3;
	-webkit-column-gap: 10px;
	-webkit-column-rule: none;
	column-count: 3;
	column-gap: 10px;
	column-rule: none;
	margin: 0; /* ul reset */
	padding: 0; /* ul reset */
	line-height:1.5;
}
.content li{
	display:inline-block;
	margin: .2em .5em;
	list-style:none;
}
.content li:before{
	display:inline-block;
	margin-right: .5em;
	border-radius:50%;
	width: .5em;
	height: .5em;
	background: silver;
	vertical-align: middle;
	content:"\a0"; 
}

HTML/PHP:

<ul class="content">
  <?php while ( $allPostsWPQuery->have_posts() ) : $allPostsWPQuery->the_post(); ?>
    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
  <?php endwhile; ?>
</ul>
  <?php wp_reset_postdata(); ?>
  <?php else : ?>
    <p><?php _e( 'There no posts to display.' ); ?></p>
  <?php endif; ?>

As a stand alone example:

<!DOCTYPE HTML><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Title</title>
<style>
.content {
	-moz-column-count: 3;
	-moz-column-gap: 10px;
	-moz-column-rule: none;
	-webkit-column-count: 3;
	-webkit-column-gap: 10px;
	-webkit-column-rule: none;
	column-count: 3;
	column-gap: 10px;
	column-rule: none;
	margin: 0;
	padding: 0;
	line-height:1.5;
}
.content li{
	display:inline-block;
	margin: .2em .5em;
	list-style:none;
}
.content li:before{
	display:inline-block;
	margin-right: .5em;
	border-radius:50%;
	width: .5em;
	height: .5em;
	background: silver;
	vertical-align: middle;
	content:"\a0"; /* could be an icon from a icon-font */
}
</style>
</head><body>

<!--
<ul class="content">
  <?php while ( $allPostsWPQuery->have_posts() ) : $allPostsWPQuery->the_post(); ?>
    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
  <?php endwhile; ?>
</ul>
  <?php wp_reset_postdata(); ?>
  <?php else : ?>
    <p><?php _e( 'There no posts to display.' ); ?></p>
  <?php endif; ?>	
-->

<ul class="content">
    <li><a href="#">Post Title</a></li>
    <li><a href="#">Post Title</a></li>
    <li><a href="#">Post Title</a></li>
    <li><a href="#">Post Title of Some Length</a></li>
    <li><a href="#">Post Title of Some Length</a></li>
    <li><a href="#">Post Title</a></li>
    <li><a href="#">Long Post Title</a></li>
    <li><a href="#">Longer Post Title</a></li>
    <li><a href="#">Post Title of Some Length</a></li>
    <li><a href="#">Post Title of Some Length</a></li>
</ul>

</body></html>
6

A post was split to a new topic: Center position fixed horizontally

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.