如何左右两个元素的定位

时间：2017-01-04 18:33:21

标签： customization css html

在我的wordpress主题中，我试图在帖子的底部添加边框。在边框的顶部，我想在左边有一个评论链接，在右边有一个共享链接。我已多次尝试让它看起来我想要它，但它永远不会奏效。有没有人对我如何实现这一点有任何建议？提前致谢。我附上了一张现在看起来像的图片以及我希望它如何与我的代码一起看。

现在看起来如何...... enter image description here

我希望它看起来如何...... enter image description here

看起来如何建议（更新）...... enter image description here single.php中

＆＃13;
＆＃13; 
<?php
get_header();
the_post_thumbnail('banner-image'); 
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post">
    
<?php wpb_set_post_views(get_the_ID()); ?>    
    <div class="post-info">    
    <h1 class="post-title"><?php the_title(); ?></h1>
   <h2 class="post-date"><?php echo strip_tags(get_the_term_list( $post->ID, 'location', 'Location: ', ', ', ' • ' ));?><?php the_date('F m, Y'); ?></h2>

    </div>
    <div class="post-content"><?php the_content(); ?></div>
    <div class="post-footer"><h1 class="post-footer-comment"><?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?></h1><h2 class="share">share</h2><?php get_template_part( 'share-buttons-post' ); ?></div>
<?php comments_template(); ?>
</article>
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
get_footer();
 
?>
＆＃13;
＆＃13;
＆＃13;

和我的css

＆＃13;
＆＃13; 
 .post-footer {
    border-bottom: 1px solid #000000;
    margin:40px 100px 0 100px;
    display: block;
    text-align: justify;
max-width:1865px;
}
.post-footer-comment {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .2em;
    font-family: 'Lato', sans-serif;
    display: inline-block;
    float:left;
}
.post-footer-comment a:hover {
    color:#555555;
}
.share-buttons-post {
    letter-spacing: 10px;
    display: inline-block;
}
.share {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .2em;
    font-family: 'Lato', sans-serif;
    display: inline-block;
    float: right;
}
＆＃13;
＆＃13;
＆＃13;

的comments.php

＆＃13;
＆＃13; 
<?php if ( have_comments() ) : ?>
    <h4 class="comments-title">Post a Comment</h4>
    <ol class="comment-list">
<?php wp_list_comments('callback=custom_comments');?>
	</ol>
<?php endif; ?>

<?php
    $comments_args = array(
  'id_form'           => 'commentform',
  'class_form'      => 'comment-form',
  'id_submit'         => 'submit',
  'class_submit'      => 'submit',
  'name_submit'       => 'submit',
  'title_reply'       => __( 'Join the Conversation' ),
  'title_reply_to'    => __( 'Leave a Reply to %s' ),
  'cancel_reply_link' => __( 'Cancel reply' ),
  'label_submit'      => __( 'Post Comment' ),
  'format'            => 'xhtml',        


  'must_log_in' => '<p class="must-log-in">' .
    sprintf(
      __( 'You must be <a href="%s">logged in</a> to post a comment.' ),
      wp_login_url( apply_filters( 'the_permalink', get_permalink() ) )
    ) . '</p>',

  'logged_in_as' => '<p class="logged-in-as">' .
    sprintf(
    __( ' <a href="</a>. <a href="%3$s" title="Log out of this account"></a>' ),
      admin_url( 'profile.php' ),
      $user_identity,
      wp_logout_url( apply_filters( 'the_permalink', get_permalink( ) ) )
    ) . '</p>',

  'comment_notes_before' => '<p class="comment-notes">' .
    __( '' ) . ( $req ? $required_text : '' ) .
    '</p>',
        
        
 'author' =>
    '<p class="comment-form-author"><label for="author">' . __( 'Name', 'domainreference' ) . '</label> ' .
    ( $req ? '<span class="required">*</span>' : '' ) .
    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
    '" size="30"' . $aria_req . ' /></p>',

  'email' =>
    '<p class="comment-form-email"><label for="email">' . __( 'Email', 'domainreference' ) . '</label> ' .
    ( $req ? '<span class="required">*</span>' : '' ) .
    '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
    '" size="30"' . $aria_req . ' /></p>',

  'url' =>
    '<p class="comment-form-url"><label for="url">' . __( 'Website', 'domainreference' ) . '</label>' .
    '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
    '" size="30" /></p>',          

 
        




);
    comment_form($comments_args);
?>
＆＃13;
＆＃13;
＆＃13;

的functions.php

＆＃13;
＆＃13; 
<?php
define( 'WP_DEBUG', true );
    function learningWordPress_resources() {
        wp_enqueue_style('style', get_stylesheet_uri());
        wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', array('jquery'), '3.3.7', true );
        wp_enqueue_style( 'bootstrap-style', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
    }
 
add_action('wp_enqueue_scripts', 'learningWordPress_resources');
     
//Navigation Menus
register_nav_menus(array(
    'primary' => __('Primary Menu'),
    'footer' => __( 'Footer Menu'),
));
class CSS_Menu_Walker extends Walker {
 
var $db_fields = array('parent' => 'menu_item_parent', 'id' => 'db_id');
function start_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul>\n";
}
function end_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul>\n";
}
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
global $wp_query;
$indent = ($depth) ? str_repeat("\t", $depth) : '';
$class_names = $value = '';
$classes = empty($item->classes) ? array() : (array) $item->classes;
/* Add active class */
if (in_array('current-menu-item', $classes)) {
$classes[] = 'active';
unset($classes['current-menu-item']);
}
/* Check for children */
$children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
if (!empty($children)) {
$classes[] = 'has-sub';
}
$class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
$class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
$id = apply_filters('nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args);
$id = $id ? ' id="' . esc_attr($id) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names .'>';
$attributes  = ! empty($item->attr_title) ? ' title="'  . esc_attr($item->attr_title) .'"' : '';
$attributes .= ! empty($item->target)     ? ' target="' . esc_attr($item->target    ) .'"' : '';
$attributes .= ! empty($item->xfn)        ? ' rel="'    . esc_attr($item->xfn       ) .'"' : '';
$attributes .= ! empty($item->url)        ? ' href="'   . esc_attr($item->url       ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'><span>';
$item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
$item_output .= '</span></a>';
$item_output .= $args->after;
$output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
}
function end_el(&$output, $item, $depth = 0, $args = array()) {
$output .= "</li>\n";
}
}
 
 
// Add Widget Areas
function ourWidgetsInit() {
     
    register_sidebar( array(
        'name' => 'Sidebar',
        'id' => 'sidebar1',
        'before_widget' => '<div class="widget-item">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ));
     
    register_sidebar( array(
        'name' => 'Footer Area 1',
        'id' => 'footer1',
        'before_widget' => '<div class="widget-item">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ));
     
    register_sidebar( array(
        'name' => 'Footer Area 2',
        'id' => 'footer2',
        'before_widget' => '<div class="widget-item">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ));
     
    register_sidebar( array(
        'name' => 'Footer Area 3',
        'id' => 'footer3',
        'before_widget' => '<div class="widget-item">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ));
     
    register_sidebar( array(
        'name' => 'Footer Area 4',
        'id' => 'footer4',
        'before_widget' => '<div class="widget-item">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ));
     
}
 
add_action('widgets_init', 'ourWidgetsInit');

// Theme setup
function learningWordpress_setup() {
// Navigation Menus    
register_nav_menus(array(
    'primary' => __('Primary Menu'),
    'footer' => __( 'Footer Menu'),
));

// Add featured image support
    add_theme_support('post-thumbnails');
    add_image_size('medium-thumbnail', 446, 345, true);
    add_image_size('large-thumbnail', 1386, 595, true);
    add_image_size('popular-posts', 256, 256, true);
        add_image_size('banner-image', 5555,2500, true);
}

add_action('after_setup_theme', 'learningWordpress_setup');
// Register Custom Taxonomy
function location() {

    $labels = array(
        'name'                       => 'Locations',
        'singular_name'              => 'Location',
        'menu_name'                  => 'Location',
        'all_items'                  => 'All Items',
        'parent_item'                => 'Parent Item',
        'parent_item_colon'          => 'Parent Item:',
        'new_item_name'              => 'New Item Name',
        'add_new_item'               => 'Add New Item',
        'edit_item'                  => 'Edit Item',
        'update_item'                => 'Update Item',
        'view_item'                  => 'View Item',
        'separate_items_with_commas' => 'Separate items with commas',
        'add_or_remove_items'        => 'Add or remove items',
        'choose_from_most_used'      => 'Choose from the most used',
        'popular_items'              => 'Popular Items',
        'search_items'               => 'Search Items',
        'not_found'                  => 'Not Found',
        'no_terms'                   => 'No items',
        'items_list'                 => 'Items list',
        'items_list_navigation'      => 'Items list navigation',
    );
    $args = array(
        'labels'                     => $labels,
        'hierarchical'               => false,
        'public'                     => true,
        'show_ui'                    => true,
        'show_admin_column'          => true,
        'show_in_nav_menus'          => true,
        'show_tagcloud'              => true,
    );
    register_taxonomy( 'location', array( 'post' ), $args );

}
add_action( 'init', 'location', 0 );
// Carousel
function carousel_scripts() {
    wp_enqueue_style( 'owl.carousel', get_template_directory_uri() . '/css/owl.carousel.css' );
    wp_enqueue_style( 'owl.theme', get_template_directory_uri() . '/css/owl.theme.css' );
    wp_enqueue_script( 'owl.carousel', get_template_directory_uri() . '/js/owl.carousel.js', array('jquery'), '20120206', true );
    wp_enqueue_script( 'effects', get_template_directory_uri() . '/js/effects.js', array('jquery'), '20120206', true );
}
add_action( 'wp_enqueue_scripts', 'carousel_scripts' );
// Custom control for carousel category
 
if (class_exists('WP_Customize_Control')) {
    class WP_Customize_Category_Control extends WP_Customize_Control {
 
        public function render_content() {
   
            $dropdown = wp_dropdown_categories( 
                array(
                    'name'              => '_customize-dropdown-category-' . $this->id,
                    'echo'              => 0,
                    'show_option_none'  => __( '&mdash; Select &mdash;' ),
                    'option_none_value' => '0',
                    'selected'          => $this->value(),
                     
                )
            );
 
            $dropdown = str_replace( '<select', '<select ' . $this->get_link(), $dropdown );
  
            printf(
                '<label class="customize-control-select"><span class="customize-control-title">%s</span> %s</label>',
                $this->label,
                $dropdown
            );
        }
    }
}
 
// Register slider customizer section 
 
add_action( 'customize_register' , 'carousel_options' );
 
function carousel_options( $wp_customize ) {
 
$wp_customize->add_section(
    'carousel_section',
    array(
        'title'     => 'Carousel settings',
        'priority'  => 202,
        'capability'  => 'edit_theme_options',
    )
);
 
$wp_customize->add_setting(
    'carousel_setting',
     array(
    'default'   => '',
  )
);
 
$wp_customize->add_control(
    new WP_Customize_category_Control(
        $wp_customize,
        'carousel_category',
        array(
            'label'    => 'Category',
            'settings' => 'carousel_setting',
            'section'  => 'carousel_section'
        )
    )
);
 
$wp_customize->add_setting(
    'count_setting',
     array(
    'default'   => '6',
 
  )
);
 
$wp_customize->add_control(
    new WP_Customize_Control(
        $wp_customize,
        'carousel_count',
        array(
            'label'          => __( 'Number of posts', 'theme_name' ),
            'section'        => 'carousel_section',
            'settings'       => 'count_setting',
            'type'           => 'text', 
        )
    )
);
 
}
//MORE COMMENTS
/**
 * Return the default comment form fields.
 *  Customize comment form default fields.
 * Move the comment_field below the author, email, and url fields.
 */
function wpse250243_comment_form_default_fields( $fields ) {
    $commenter     = wp_get_current_commenter();
    $user          = wp_get_current_user();
    $user_identity = $user->exists() ? $user->display_name : '';
    $req           = get_option( 'require_name_email' );
    $aria_req      = ( $req ? " aria-required='true'" : '' );

    $fields = [
        'author' => '<p class="comment-form-author">' . '<label for="author">' . __( '', 'textdomain'  ) . ( $req ? ' <span class="required"></span>' : '' ) . '</label> ' .
                    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30" maxlength="245"' . $aria_req . $html_req . ' /></p>',
        'email'  => '<p class="comment-form-email"><label for="email">' . __( '', 'textdomain'  ) . ( $req ? ' <span class="required"></span>' : '' ) . '</label> ' .
                    '<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30" maxlength="100" aria-describedby="email-notes"' . $aria_req . $html_req  . ' /></p>',
        'url'    => '<p class="comment-form-url"><label for="url">' . __( '', 'textdomain'  ) . '</label> ' .
                    '<input id="url" name="url" ' . ( $html5 ? 'type="url"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" maxlength="200" /></p>',
        'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( '', 'noun', 'textdomain' ) . '</label> <textarea id="comment" placeholder="Comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea></p>',
    ];

    return $fields;
}
add_filter( 'comment_form_default_fields', 'wpse250243_comment_form_default_fields' );

/**
 * Remove the original comment field because we've added it to the default fields
 * using wpse250243_comment_form_default_fields(). If we don't do this, the comment
 * field will appear twice.
 */
function wpse250243_comment_form_defaults( $defaults ) {
    if ( isset( $defaults[ 'comment_field' ] ) ) {
        $defaults[ 'comment_field' ] = '';
    }

    return $defaults;
}
add_filter( 'comment_form_defaults', 'wpse250243_comment_form_defaults', 10, 1 );
//COMMENTS
add_filter( 'comment_form_default_fields', 'wpse_62742_comment_placeholders' );

/**
 * Change default fields, add placeholder and change type attributes.
 *
 * @param  array $fields
 * @return array
 */
function wpse_62742_comment_placeholders( $fields )
{
    $fields['author'] = str_replace(
        '<input',
        '<input placeholder="'
        /* Replace 'theme_text_domain' with your theme’s text domain.
         * I use _x() here to make your translators life easier. :)
         * See http://codex.wordpress.org/Function_Reference/_x
         */
            . _x(
                'Name',
                'comment form placeholder',
                'theme_text_domain'
                )
            . '"',
        $fields['author']
    );
    $fields['email'] = str_replace(
        '<input id="email" name="email" type="text"',
        /* We use a proper type attribute to make use of the browser’s
         * validation, and to get the matching keyboard on smartphones.
         */
        '<input type="email" placeholder="Email"  id="email" name="email"',
        $fields['email']
    );
    $fields['url'] = str_replace(
        '<input id="url" name="url" type="text"',
        // Again: a better 'type' attribute value.
        '<input placeholder="Website" id="url" name="url" type="url"',
        $fields['url']
    );

    

    return $fields;
}
//Comments Continued
if ( get_option ('thread_comments') ) {
    wp_enqueue_script('comment-reply');
}
//Comments
function custom_comments ($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment; ?>
  <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
      <div id="comment-<?php comment_ID(); ?>">
          <header class="comment-author-vcard">
              
              
              <?php printf (__('<cite_class="fn">%s</cite> <span class="says"></span>'), get_comment_author_link()) ?>
    </header>
          

          
          <div class="comment-meta"><a href="<?php echo htmlspecialchars( get_comment_link($comment->comment_ID )) ?>"></a></div>
              
              <div class="comment-content"><?php comment_text() ?></div>
              
          <div class="comment-time"><?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time() ) ?><?php edit_comment_link(__('(Edit)'), '   ', ' ') ?><?php comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth'] ))) ?></div>                           
          
           
          
          <div class="reply">
              
          </div>
      </div>
          <?php
}
//New Menus
function register_my_menus() {
  register_nav_menus(
    array(
      'new-menu' => __( 'Footer Menu Secondary' ),
      'another-menu' => __( 'Another Menu' ),
      'an-extra-menu' => __( 'An Extra Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );
// Wordpress
function load_fonts() {
            wp_register_style('et-googleFonts', 'https://fonts.googleapis.com/css?family=David+Libre|Crimson+Text|Questrial|Montserrat|Catamaran|Pathway+Gothic+One|PT+Serif|Days+One|Lato:300|Work+Sans:400,500,600,700');
            wp_enqueue_style( 'et-googleFonts');
        }
    add_action('wp_print_styles', 'load_fonts');
// Popular Posts
function wpb_set_post_views($postID) { 
$count_key = 'wpb_post_views_count'; 
$count = get_post_meta($postID, $count_key, true); 
if($count==''){ 
$count = 0; 
delete_post_meta($postID, $count_key); 
add_post_meta($postID, $count_key, 0); 
}else{ 
$count++; 
update_post_meta($postID, $count_key, $count); 
} 
} 
//To keep the count accurate, lets get rid of prefetching 
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);

function wpb_track_post_views ($post_id) { 
if ( !is_single() ) return; 
if ( empty ( $post_id) ) { 
global $post; 
$post_id = $post->ID; 
} 
wpb_set_post_views($post_id); 
} 
add_action( 'wp_head', 'wpb_track_post_views');
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

我认为您正试图右对齐共享按钮。

尝试更改此部分：

<h2 class="share">share</h2><?php get_template_part( 'share-buttons-post' ); ?>

到此：

<div class="share"><span>share</span> <?php get_template_part( 'share-buttons-post' ); ?></div>

编辑基于进一步的评论：现在将页脚行放在评论/共享信息下方，将其添加到.post-footer CSS：

overflow: hidden;

移动“分享”这个词。稍微向下，使用上面更新的<div class="share">行，然后这个CSS应该这样做：

.share span {
    display: inline-block;
    position: relative;
    top: 2px;
}
相关问题
最新问题