Question

更新2：

我无法在div中浮动一个跨度..

<div class="noselect" id="teach_create_pageheader">
<span class="teach_create_pageheader_back"></span>
   Step 1
<span class="teach_create_pageheader_forward"></span>
</div>

这是我的CSS。我希望它们向左浮动并相应地向右浮动。

#teach_create_pageheader{
width:880px;
height: 30px;
margin: -10px;
padding-top: 5px;
background-color: gray;
font-size: 14px;
text-align: center;
font-weight: bold;
color: white;
-webkit-font-smoothing: antialiased;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
opacity:0.8;
filter:alpha(opacity=80);
}

.teach_create_pageheader_back{
    float: left;
    margin-bottom: 5px;
}

.teach_create_pageheader_forward{
    float: right;
    margin-bottom: 5px;
}

span {
display: block;
}

我让JQuery使用以下代码制作按钮（以及其他按钮）：

(function($){

// Creating the jQuery plugin:
$.fn.sweetPages = function(opts){

// If no options were passed, create an empty opts object
if(!opts) opts = {};

var resultsPerPage = opts.perPage || 3;

// The plugin works best for unordered lists, althugh ols would do just as well:
var ul = this;
var li = ul.find('li');

li.each(function(){
    // Calculating the height of each li element, and storing it with the data method:
    var el = $(this);
    el.data('height',el.outerHeight(true));
});

// Calculating the total number of pages:
var pagesNumber = Math.ceil(li.length/resultsPerPage);

// If the pages are less than two, do nothing:
if(pagesNumber<2) return this;

// Creating the controls div:
var swControls = $('<div class="swControls">');

for(var i=0;i<pagesNumber;i++)
{
    // Slice a portion of the lis, and wrap it in a swPage div:
    li.slice(i*resultsPerPage,(i+1)*resultsPerPage).wrapAll('<div class="swPage" />');

    // Adding a link to the swControls div:
    swControls.append('<a href="" class="swShowPage">'+(i+1)+'</a>');
}

ul.append(swControls);

var maxHeight = 0;
var totalWidth = 0;

var swPage = ul.find('.swPage');
swPage.each(function(){

    // Looping through all the newly created pages:

    var elem = $(this);

    var tmpHeight = 0;
    elem.find('li').each(function(){tmpHeight+=$(this).data('height');});

    if(tmpHeight>maxHeight)
        maxHeight = tmpHeight;

    totalWidth+=elem.outerWidth();

    elem.css('float','left').width(ul.width());
});

swPage.wrapAll('<div class="swSlider" />');

// Setting the height of the ul to the height of the tallest page:
ul.height(maxHeight);

var swSlider = ul.find('.swSlider');
swSlider.append('<div class="clear" />').width(totalWidth);

var hyperLinks = ul.find('a.swShowPage');

hyperLinks.click(function(e){

    // If one of the control links is clicked, slide the swSlider div 
    // (which contains all the pages) and mark it as active:

    $(this).addClass('active').siblings().removeClass('active');

    swSlider.stop().animate({'margin-left':-(parseInt($(this).text())-1)*ul.width()},'slow');
    e.preventDefault();
});

// Mark the first link as active the first time this code runs:
hyperLinks.eq(0).addClass('active');

// Center the control div:
swControls.css({
    'left':'50%',
    'margin-left':-swControls.width()/2
});

return this;

}})(jQuery);


$(document).ready(function(){
/* The following code is executed once the DOM is loaded */

// Calling the jQuery plugin and splitting the
// #holder UL into pages of 3 LIs each:

$('#holder').sweetPages({perPage:1});

// The default behaviour of the plugin is to insert the 
// page links in the ul, but we need them in the main container:

var controls = $('.swControls').detach();
controls.appendTo('#main');



function swGotoPage(page){
      $('.swShowPage:contains("' + page + '")').click();
}

var baseFB = '<input type="button" class="swFB" />';
var offset = 'pgOffset';
var active = '.swShowPage.active';

var $pgBack = $(baseFB)
    .attr('id', 'button_back')
    .attr('value', "Back")
    .attr(offset, '-1');

var $pgForward = $(baseFB)
    .attr('id', 'button_forward')
    .attr('value', "Forward")
    .attr(offset, '1');

$.each([$pgBack, $pgForward], function(i,$obj){
    $obj.click(function(){
        var nextPage =  parseInt($(active).text(), 10) + parseInt($(this).attr(offset), 10);
        swGotoPage(nextPage);
    });
});


$($pgForward).addClass("teach_create_backforward");
$($pgBack).addClass("teach_create_backforward");

$('#teach_create_pageheader_back').replaceWith($pgBack);
$('#teach_create_pageheader_forward').replaceWith($pgForward);

});

Answer 1

您正在使用ID选择器和类选择器：

#teach_create_pageheader_back{   /* ID */
    float: left;
    margin-bottom: 5px;
}

.teach_create_pageheader_forward{ /* class */
    float: right;
    margin-bottom: 5px;
}

也许其中一个是错的？

Answer 2

尝试display: inline-block，然后浮动：左

Answer 3

它们不能正常浮动的原因是因为它们之间的“第1步”文本

他们应该在源中彼此跟随浮动，一个向左一个，然后中间的文本应该适合它们之间

关于无法浮动span的答案是误导性的......你可以浮动任何元素

示例：

#wrap {
    background-color: gray;
    font-size: 14px;
    font-weight: bold;
    color: white;
    text-align: center;
}

.fl {
    float: left;
}

.fr{
    float: right;
}

<div id="wrap"> <span class="fl">back</span> <span class="fr">forward</span> text</div>

更新

我使用您自己的原始代码为您提供了更新的小提琴： JSfiddle

最后在你的jQuery代码中，你似乎正在为每个变量/ div分配相同的类......是吗？

$($pgForward).addClass("teach_create_backforward"); 
$($pgBack).addClass("teach_create_backforward");

Answer 4

在审核代码之后..我的replaceWith导致了问题。我现在有.prepend，它很棒。感谢大家的帮助！

无法在div内浮动跨度

4 个答案:

更新