在烧瓶中右对齐熊猫数据框答案

【问题标题】：right align pandas data frame in flask在烧瓶中右对齐熊猫数据框
【发布时间】：2018-09-07 14:49:35
【问题描述】：

我正在烧瓶中创建一个 API。我想在上传按钮的正对面显示熊猫数据框。我可以通过各种方式来证明列标题/文本的合理性，而不是框架本身。使用的flask代码是：

app = Flask(__name__)

@app.route('/upload', endpoint='upload_file1')

def upload_file1():
    df_table=data.head().to_html()   
    return render_template('upload.html', df_table=df_table)

html代码是：

<html>
<head>       
<title>CR prediction tool</title> 

</head> 

    <body bgcolor="#E6E6FA">


      <form action = "http://localhost:5000/uploader" method = "POST" 
         enctype = "multipart/form-data" >
         <input type = "file" name = "file"  />
         <input type = "submit" />
         {% block content %}
         <style  align= "float:right">
         </style>   
         {{df_table | safe}}
         {% endblock %}

【问题讨论】：

这大概可以用css来完成，你能把你的upload.html模板贴出来吗？
@MarkBeilfuss 添加了模板。
看起来您没有包含整个模板。我没有看到表单或正文的结束标签。

标签： python html css pandas flask

【解决方案1】：

有很多方法可以像这样对齐 html 元素。这是一个简单的方法。将两个元素包装在自己的 div 中，并使用 css 将 div 设置为display: inline-block，然后给出固定或百分比width。让我知道这是否有帮助。有关工作示例，请检查此 jsfiddle：https://jsfiddle.net/35fy20Ls/4/

<style>
    .inline-block {
        display: inline-block;
        width: 40%;
    }
</style>
<div class="inline-block">
    <form action = "http://localhost:5000/uploader" method = "POST" enctype = "multipart/form-data" >
        <input type = "file" name = "file"  />
        <input type = "submit" />
    </form>
</div>
<div class="inline-block">
    {% block content %}
    {{df_table | safe}}
    {% endblock %} 
</div>

【讨论】：