无法删除保证金引导

我有一个差距正好低于我的第一个预标签我无法删除它。无法删除保证金引导

我已经试过

pre { 
    margin: 0 0 0; 
}

而且

pre { 
    margin: 0 0 0 !important; 
}

但仍显示

问题：怎么可能正确删除边缘或填充刚刚低于第一个预先？

注：刚刚发现是与nl2br的控制器功能如下

我用笨和Ajax生成预览。

CSS

<style type="text/css"> 

body { 
    background-color: #F0F0F0; 
} 

pre { 
    display: block; 
    padding: 9.5px; 
    margin: 0 0 0 !important; 
    font-size: 13px; 
    line-height: 1.42857143; 
    color: #333; 
    word-break: break-all; 
    word-wrap: break-word; 
    background-color: #f5f5f5; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
} 

hr { 
    background-color: #dedede !important; 
    height: 1px !important; 
} 

h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    margin: 0; 
    padding: 0; 
    font-family: Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; 
    margin-top: 0; 
} 
</style>

脚本

<script type="text/javascript"> 
$('#preview-question').on('click', function (e) { 
    $.ajax({ 
     url: "<?php echo base_url('question/preview');?>", 
     type: 'POST', 
     data: { 
      title: $('#title').val(), 
      question: $('#question').val(), 
      '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>' 
     }, 
     dataType: 'json', 
     success: function(response){ 
      if (response.success) { 
       $('#preview').html(response.question); 
       $('#preview pre br').remove(); 
       var str = $('#preview pre').html(); 
       $('#preview pre').html(str.replace(/</g, "&lt;").replace(/>/g, "&gt;")); 
       $('pre').each(function(i, block) { 
        hljs.highlightBlock(block); 
       }); 
      } else { 

      } 
     } 

    }); 

    e.preventDefault(); 
}); 
</script>

功能

public function preview() { 

    $data = array('success' => false, 'question' => ''); 

    if ($_POST) { 

     $data['question'] = nl2br($this->input->post('question')); 

     $data['success'] = true; 
    } 

    echo json_encode($data); 
}

FULL HTML

<?php echo form_open_multipart('question/create', array('id' => 'question_create', 'class' => 'form-horizontal', 'role' => 'form'));?> 
<div class="container"> 
<div class="row"> 

<div class="panel panel-default"> 
<div class="panel-heading"> 
<h1 class="panel-title"></h1> 
</div> 
<div class="panel-body"> 

<div class="form-group"> 
<label class="col-lg-2">Title</label> 
<div class="col-lg-10"> 
<input type="text" name="title" id="title" class="form-control" placeholder="Title" /> 
</div> 
</div> 

<div class="form-group"> 
<label class="col-lg-2">Question</label> 
<div class="col-lg-10"> 
<textarea name="question" id="question" class="form-control" rows="10"></textarea> 
</div> 
</div> 

<div class="form-group"> 
<label class="col-lg-2"></label> 
<div class="col-lg-10"> 
<div id="preview"></div> 
</div> 
</div> 

</div> 
<div class="panel-footer"> 
<div class="text-center"> 
<button type="submit" class="btn btn-primary">Submit</button> 
<button type="button" id="preview-question" class="btn btn-default">Preview</button> 
<button type="button" class="btn btn-warning">Clear Textarea</button> 
<a href="" class="btn btn-danger" role="button">Cancel</a> 
</div> 
</div> 
</div> 

</div> 
</div> 
<script type="text/javascript"> 
$('#preview-question').on('click', function (e) { 
    $.ajax({ 
     url: "<?php echo base_url('question/preview');?>", 
     type: 'POST', 
     data: { 
      title: $('#title').val(), 
      question: $('#question').val(), 
      '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>' 
     }, 
     dataType: 'json', 
     success: function(response){ 
      if (response.success) { 
       $('#preview').html(response.question); 
       $('#preview pre br').remove(); 
       var str = $('#preview pre').html(); 
       $('#preview pre').html(str.replace(/</g, "&lt;").replace(/>/g, "&gt;")); 
       $('#preview pre').each(function(i, block) { 
        hljs.highlightBlock(block); 
       }); 
      } else { 

      } 
     } 

    }); 

    e.preventDefault(); 
}); 
</script> 
<?php echo form_close();?>

来源

2016-10-28 user4419336

它与控制器功能上的nl2br有关 – user4419336

您能否给我在浏览器中元素的HTML？ – djl

@djl我注意到它与控制器 – user4419336

首先，我认为你应该使用

预{

margin: 0 0 0 0 !important;

}
而不是

预{

margin: 0 0 0 !important;

}
让我知道这是否有助于

来源

2016-10-28 08:52:00

没有抱歉没有 – user4419336

添加清除AR到预先标记

pre { 
    clear:both; 
}

来源

2016-10-28 09:06:21 Vishnu

，如果你格式化你的HTML这样的，我认为，你可以管理pre元素的边缘。您必须应用“箱子”式的颜色和背景，例如到.highlight类和其他样式到pre。

如果您使用与引导程序相同的“代码识别器”，则code元素是可选的。

HTML

<figure class="highlight"> 
    <pre> 
    <!--<code class="language-html" data-lang="html">--> 
    <!-- your code here --> 
    <!--</code>--> 
    </pre> 
</figure>

CSS

.highlight { 
    padding: 9px 14px; 
    margin-bottom: 0; /* no margin-bottom */   
}

来源

2016-10-28 09:58:07 djl

感谢@djl建议，我已经找到了我需要添加replace('\n', '')我下面的脚本删除无形的线断

全部正在运行

<script type="text/javascript"> 
$('#preview-question').on('click', function (e) { 
    $.ajax({ 
     url: "<?php echo base_url('question/preview');?>", 
     type: 'POST', 
     data: { 
      title: $('#title').val(), 
      question: $('#question').val(), 
      '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>' 
     }, 
     dataType: 'json', 
     success: function(response){ 
      if (response.success) { 
       $('#preview').html(response.question); 
       $('#preview pre br').remove(); 
       var str = $('#preview pre').html(); 
       $('#preview pre').html(str.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace('\n', '')); 
       $('#preview pre').each(function(i, block) { 
        hljs.highlightBlock(block); 
       }); 
      } else { 

      } 
     } 

    }); 

    e.preventDefault(); 
}); 
</script>

来源

2016-10-28 10:45:57 user4419336

无法删除保证金引导

回答

相关问题