css - 无法让 Float 在 WordPress 中使用表单

Question

在我的 wordpress 主页 ( http://ahsvegas.com/ ) 上，我有一个标准的复制 block 和一个忍者形式，我希望它们出现在同一水平线上。最初它们在同一行，但我更正了页脚中的错误(未关闭的 div 标记)，从那时起无论我尝试什么我都无法让它们对齐。调整了 float 、元素的顺序、宽度等。有什么想法吗？

这是我的 CSS:

/* 
Theme Name: American Handyman Services
*/  

/*principle structure--------------------------------------------------------------------------------*/

body {
background:#cfcfcf;
padding:0px;
margin:0px;
}

#content {
font-size:14px;
font-family:Arial, Sans-Serif;
width:auto;
float:left;
}

#box {
background:white;
width:824px;
min-height: 650px;
margin:auto;
}

/*header---------------------------------------------------------------------*/

#header {
width:auto;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
margin-top:0px;
background: transparent no-repeat;
}

#logo{
background: transparent url("http://ahsvegas.com/wp-content/uploads/2015/11/AHS_Vegas_Logo.png") no-repeat;
width:475px;
height:130px;
overflow:hidden;
margin-left:auto;
margin-right:auto;
margin-bottom:35px;
margin-top:80px;
}

/* Pages Nav---------------------------------------------------------------------*/

#topbg {
margin:auto;
padding:0;
overflow:hidden;
background-color:#07094b;
position:absolute;
top:0;
width:100%;
height:70px;
}

#navmenu {
width:784px;
margin:0px auto;
}

#navmenu ul {
list-style-type: none;
display: inline-block;
float:left;
margin:0;
padding:0;
}

#navmenu li {
display:inline-block;
}

#navmenu ul li a {
display:inline-block;
color: white;
font-size:18px;
font-family:Arial, Sans-Serif;
padding:24px 32px 0px 0px;
text-decoration: none;
}

#navmenu ul li a:hover {
text-decoration:underline;
}

#navmenu ul li a:active {
text-decoration:underline;
}

#social {
padding:6px 0px 0px 0px;
float:right;
}

/*post------------------------------------------------------------*/
.post {
color:#000000;
padding:5px 20px;
margin-top:-6px;
}

h1 {
color:#000000;
font-family:Helvetica, Sans-Serif;
font-size: 24px;
text-decoration:none;
margin-top:10px;
}

h3 {
color:#000000;
font-size: 16px;
text-decoration:none;
}

.entry {
color:#000000;
padding:0px 20px 0px 20px;
}

.entrytext {
}

.pagetitle {
}

/*links------------------------------------*/

a {
color:#07094b;
font-size: 13px;
text-decoration:underline;
padding: 0px; 
}

a:hover {
color:#000000;
text-decoration:underline;
}

/*Misc -----------------------------------*/

a img {
border:0px;
}

img {
border:0px;
}

.description {
padding:0 5px 15px 5px;
}

/*Ninja Forms -----------------------------------*/
#ninja_forms_form_1_wrap {
    background-color: #cfcfcf;
    padding: 0px 0px 10px 0px;
    border: 0px;
    width:235px;
    font-family:Helvetica, Sans-Serif;
    font-size: 12px;
    color:#ffffff;
    float:right;
    margin-top:0px;
    margin-left:20px;
    margin-bottom:20px;
    }

/* Form Title */
h2 {
color:#ffffff;
font-family:Helvetica, Sans-Serif;
font-size: 17px;
text-decoration:none;
background:#07094b;
width:100%;
padding:10px 0px 10px 10px;
text-decoration:none;
margin-top:0px;
}

/* Fields marked with an * are required text */
.ninja-forms-required-items {
    margin:0px 6px 12px 10px;
    font-size: 13px;    
    color:#000;
}

/* All Input fields */
.ninja-forms-field {
    background-color: #ffffff;
    border: 0px;
    font-size: 14px;
    margin:8px 0px 10px 0px;
}

/* Name field label and input box */
#ninja_forms_field_1_div_wrap,
#ninja_forms_field_2_div_wrap,
#ninja_forms_field_3_div_wrap,
#ninja_forms_field_11_div_wrap {
    color:#000000;
    font-size: 14px;
    margin:0px 10px;
}

#ninja_forms_field_1,
#ninja_forms_field_2,
#ninja_forms_field_11 {
    width: 215px;
    height: 24px;
}

/* Message field input */
#ninja_forms_field_3{
    width: 215px;
    height: 90px;
}

/* The Send button */
#ninja_forms_field_5 {
    background-color: #07094b;
    border: 0px
    font-size:14px;
    font-family:Arial, Sans-Serif;
    color:#fff;
    font-weight: bold;
    padding:6px;
    cursor: pointer;
    margin:0px 0px 0px 90px;
}

/* The Send button - hover - mouse over effect */
#ninja_forms_field_5:hover{
    background-color: #000000;
    border: 0px;
}

.hp-wrap {
    display: none;
}

/*footer---------------------------------------*/

footer {
font-family:Arial, Sans-Serif;
text-align:center;
font-size: 12px;
color:#000000;
background:#ffffff;
padding-top: 20px;
padding-bottom: 20px;
margin: 0px auto;
width:824px;
}

footer a {
font-size: 12px;
color:#000000;
text-decoration:none;
}

footer a:hover {
color:#07094b;
text-decoration:underline;
}

/*Gallery---------------------------*/

.gallery-caption {
max-width:97%; 
font-size:14px;
}

Index.php代码:

<?php get_header(); ?>

    <div id="content">

    <?php if (have_posts()) : ?>

        <?php while (have_posts()) : the_post(); ?>

            <div class="post">
                <h2 style="display: none;" id="post-<?php the_ID(); ?>"><?php the_title(); ?></h2>

                <div class="entry">
                    <?php the_content('Read the rest of this entry &raquo;'); ?>
                </div>

                <!--
                <?php trackback_rdf(); ?>
                -->
            </div>

        <?php endwhile; ?>

    <?php endif; ?>

    </div>

<?php get_footer(); ?>

Page.php，页面模板代码:

<?php get_header(); ?>
    <div id="content">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div class="post">
        <title id="post-<?php the_ID(); ?>"><?php the_title(); ?></title>
            <div class="entrytext">
                <?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>

                <?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>
                    </div>
        </div>
      <?php endwhile; endif; ?>

    </div>
</div>
<?php get_footer(); ?>

还有 footer.php 代码:

<footer>
    <div id="footer-meta" class="container">
    <div class="row">   
        <p>100140 W. Cheyenne, Ste. 170<br/>

        Las Vegas, NV 89129 &bull; 702.256.6067<br/>

        <a href="http://www.laurendwalker.com" target="_blank">&copy; <?php echo date("Y"); ?> </a> 
        </p>

        </div>
    </div>
</footer>
<?php wp_footer(); ?>   
</body>
</html>

Answer 1

通过“对齐”，您能否让我们知道您希望它与什么对齐。 <p>中的复制文本标签是显示 block ，“ninja_forms_form_1_cont”div 也是如此。

所以除非您将 css 添加到 % 或固定 px 宽度，否则这些自然会跨越整个宽度？因此，如果您希望文本副本和 div 并排放置，您应该在文本周围添加一个容器 <p>标签，给它一个宽度和一些盒子大小以及忍者。