Question

我的第一个预标签下面有一个间隙，我无法删除它。

我试过了

pre {
    margin: 0 0 0;
}

并且

pre {
    margin: 0 0 0 !important;
}

但仍显示

问题：如何正确删除边距或填充就在第一个前面的下方？

注意：刚刚发现与控制器功能上的nl2br有关

我使用codeigniter和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);
}

完整的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();?>

Answer 1

我认为如果您像这样格式化HTML，则可以管理pre元素的边距。你必须使用＆＃39;框＆＃39;颜色和背景的样式，例如到.highlight类以及pre的其他样式。

code元素是可选的，如果您使用相同的代码识别器＆＃39;作为引导程序。

<强> 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 */        
}

Answer 2

首先我认为你应该使用

前{

margin: 0 0 0 0  !important;

}
而不是

前{

margin: 0 0 0   !important;

}
如果有帮助，请告诉我

Answer 3

在预标签中添加clear

pre {
  clear:both;
}

Answer 4

感谢@djl建议我发现我需要在下面的脚本中添加<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, "<").replace(/>/g, ">").replace('\n', '')); $('#preview pre').each(function(i, block) { hljs.highlightBlock(block); }); } else { } } }); e.preventDefault(); }); </script>以删除不可见的换行符

所有工作

{{1}}

无法删除保证金引导程序

4 个答案: