2016-09-16 246 views
0

所以我想让这个管理页面响应,当我调整页面时有一些问题。我希望库存中的div与3个按钮对齐。按钮不与div对齐

enter image description here

这是我的容器调整视时需要适当调整。

.reports{ 
 
    \t border: 1px solid red; 
 
    \t overflow-y: scroll; 
 
    \t /*overflow-x: hidden; */ 
 
    \t height: 100%; 
 
    } 
 
    
 
    .row{ 
 
    \t height: 4.5em; 
 
    \t width: 100%; 
 
    \t margin-left: 0; 
 
    } 
 
    
 
    .actions{ 
 
    \t float: right; 
 
    \t width: 30%; 
 
    } 
 
    .entry-group{ 
 
    \t border: 1px solid red; 
 
    \t float: left; 
 
    \t width: 70%; 
 
    } 
 
    
 
    .title{ 
 
    \t border: 1px solid red; 
 
    \t float: right; 
 
    \t width: 72.5%; 
 
    \t height: 3.7em; 
 
    \t word-wrap: break-word; 
 
    \t margin-left: 2em; 
 
    }
<div class="reports"> 
 
    \t <div class="list-group-item row"> 
 
    \t \t <div class="entry-group"> 
 
    \t \t \t <button class="btn btn-primary date" >2016-09-19</button> 
 
    \t \t \t \t \t \t \t \t \t \t 
 
    \t  \t \t <div class="title"> 
 
    \t \t \t \t <h4 class="list-group-item-heading">2080136 - Inventory</h4> 
 
    \t \t \t \t <p class="list-group-item-text">2 Napier Court West Southend On Sea SS1 1JU</p> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t \t \t \t \t \t \t \t 
 
    \t \t <div class="actions"> 
 
    \t \t \t <button class="btn btn-primary download">Download</button> 
 
    \t \t \t <button class="btn btn-primary edit">Edit</button> 
 
    \t \t </div> 
 
    \t </div> 
 
</div> 
 

+0

是屏幕捕捉您的当前或预期的输出? –

+1

你将需要提供更多的代码,包括CSS和父元素 –

+0

@TimBiegeleisen我目前的输出 –

回答

1

我认为这里的代码的几个问题。首先,我认为你的'tr'和'td'之间有DIV,并且没有'table'元素是很奇怪的。

我认为你正在尝试混合不同的做事方式:bootstrap和HTML表格。

我的建议是使用类似layoutit.com的东西来建立一个布局,divs只在bootstrap中。您仍然可以轻松地将其集成到您的后端技术中,并通过编辑类名来获得div的响应。 COL-SM-1。

据我所知,你想要使用表格报告,说,它应该完全进行,没有中间divs。

+1

这并不奇怪。这是无效的。 – Rob

+0

它不“依赖”。无效的标记是无效的标记,并且在返回到表元素第一次引入时的每一种方式都是无效的。通过验证器运行它并查看结果。 – Rob

+0

我不再使用表格,这是第一次尝试,只是没有删除标签...抱歉的混乱。我现在删除了它们,但这不是解决我的问题的方法。干杯^ _^ –

0

地址:

.title h4 { 
    margin-top: 0px; 
} 
.date { 
    float: left; 
} 

.title删除margin-left: 2em;

这是你的提琴的更新版本:https://jsfiddle.net/r11p5n4d/

+1

非常感谢:) –

+0

@Rob“我的”标记与原来的小提琴没有任何变化。请随时以他们的方式指出任何抱怨或建议,但我没有看到如何将这个评论复制到每个答案是远程的建设性的。 – Larkeith

+0

@Larkeith您正试图“修复”不可修复的标记。这没有帮助。这是我警告别人,这是一个严重的问题,应该避免。您呈现无效标记。 – Rob