Question

我无法获得我的＆＃34;内容行＆＃34;下面的课程取＆＃34; panel-group-item＆＃34;的全部宽度。类。

＆＃13;

public MasterPageCS ()
{
    var masterPageItems = new List<MasterPageItem> ();
    masterPageItems.Add (new MasterPageItem {
        Title = "Contacts",
        IconSource = "contacts.png",
        TargetType = typeof(ContactsPageCS)
    });
    masterPageItems.Add (new MasterPageItem {
        Title = "TodoList",
        IconSource = "todo.png",
        TargetType = typeof(TodoListPageCS)
    });
    masterPageItems.Add (new MasterPageItem {
        Title = "Reminders",
        IconSource = "reminders.png",
        TargetType = typeof(ReminderPageCS)
    });

    listView = new ListView {
        ItemsSource = masterPageItems,
        ItemTemplate = new DataTemplate (() => {
            var imageCell = new ImageCell ();   //This one!!!!
            imageCell.SetBinding (TextCell.TextProperty, "Title");
            imageCell.SetBinding (ImageCell.ImageSourceProperty, "IconSource");
            return imageCell;
        }),
        VerticalOptions = LayoutOptions.FillAndExpand,
        SeparatorVisibility = SeparatorVisibility.None
    };

    Padding = new Thickness (0, 40, 0, 0);
    Icon = "hamburger.png";
    Title = "Personal Organiser";
    Content = new StackLayout {
        VerticalOptions = LayoutOptions.FillAndExpand,
        Children = {
            listView
        }
    };
}

＆＃13;

.panel-group-item {
  border-bottom: 1px solid #eee;
  padding: 6px 0px;
  border: 2px solid #73b2b2;
  margin: 10px;
}

.content-row {
  background-color: #ffffff;
  display: table-row;
  margin: 10px;
}

.content-row .content-row-quantity,
.content-row .content-row-remove {
  display: table-cell;
  padding-right: 0;
  text-align: center;
  width: 15%;
}

.content-row .content-row-pic {
  display: table-cell;
  text-align: center;
  width: 17%;
}

.content-row .content-row-title {
  display: table-cell;
  padding: 10px 8px 10px 10px;
}

＆＃13;

Answer 1

这可能是因为您在父元素display: table;上的显示设置不是panel-group-item。

表格行自然会达到表格的100％宽度，但由于你没有设置display: table，所以它没有这样做。

所以我建议做这些改变：

.panel-group-item {
    display: table;
    width: 100%;
    ......
}

应该这样做！

Answer 2

如果你打算使用display：table-row，它应该在一个表中，或者有一个带有display：table的外部元素。

看看this question，这就是你现在所遇到的同样问题。

Answer 3

没有表格的表格行不能正常运作，因此请提供.content-row元素display: table;并定义其width（表格不是100％）默认情况下）。请注意宽度设置calc(100% - 20px)，其中包括100％宽度的边距。

＆＃13;

.panel-group-item {
  border-bottom: 1px solid #eee;
  padding: 6px 0px;
  border: 2px solid #73b2b2;
  margin: 10px;
}

.content-row {
  background-color: #ddd;
  width: calc(100% - 20px);
  display: table;
  margin: 10px;
}

.content-row .content-row-quantity,
.content-row .content-row-remove {
  display: table-cell;
  padding-right: 0;
  text-align: center;
  width: 15%;
}

.content-row .content-row-pic {
  display: table-cell;
  text-align: center;
  width: 17%;
}

.content-row .content-row-title {
  display: table-cell;
  padding: 10px 8px 10px 10px;
}

＆＃13;

<li class="panel-group-item">
  <div class="content-row">
    <div class="content-row-quantity">1</div>
    <div class="content-row-pic">2</div>
    <div class="content-row-title">3</div>
    <div class="content-row-remove ">4</div>
  </div>
</li>

＆＃13;

儿童Div不占父母的宽度

3 个答案: