Question

我试图让我的div显示在它自己的行上并强制li到下一行。我无法更改html或重新组织元素。它需要是一个仅限css的解决方案。

这是一个例子： https://fiddle.jshell.net/129rgqr7/

当前输出如下：

Racquet Sports - Tennis

我希望输出看起来像这样：

Racquet Sports
Tennis

Answer 1

清除答案，使其更具可读性：

    vtkSmartPointer<vtkRenderer> renderer = vtkSmartPointer<vtkRenderer>::New();


    //TEST MESH
    int N_SQUARES = 100;

    //This creates node coordinates for N_SQUARES amount of squares. (Nodal data would be read from a file later on)
    vtkSmartPointer<vtkPoints> nodes = vtkSmartPointer<vtkPoints>::New();   

    for (int i = 0; i < N_SQUARES; i++){
        nodes->InsertNextPoint(0.0, 0.0, 0.0 + 0.2f*float(i));
        nodes->InsertNextPoint(1.0, 0.0, 0.0 + 0.2f*float(i));
        nodes->InsertNextPoint(1.0, 1.0, 0.0 + 0.2f*float(i));
        nodes->InsertNextPoint(0.0, 1.0, 0.2 + 0.2f*float(i));
    }

    //Here two triangles are created for each square. (these indices would later on be read from FEM element data)
    vtkSmartPointer<vtkCellArray> triangles = vtkSmartPointer<vtkCellArray>::New();

    for (int j = 0; j < N_SQUARES; j++){
        vtkSmartPointer<vtkTriangle> triangle1 = vtkSmartPointer<vtkTriangle>::New();
        triangle1->GetPointIds()->SetId(0, 0 + j);
        triangle1->GetPointIds()->SetId(1, 1 + j);
        triangle1->GetPointIds()->SetId(2, 2 + j);

        vtkSmartPointer<vtkTriangle> triangle2 = vtkSmartPointer<vtkTriangle>::New();
        triangle2->GetPointIds()->SetId(0, 2 + j);
        triangle2->GetPointIds()->SetId(1, 3 + j);
        triangle2->GetPointIds()->SetId(2, 0 + j);


        triangles->InsertNextCell(triangle1);
        triangles->InsertNextCell(triangle2);
    }

    vtkSmartPointer<vtkPolyData> meshData = vtkSmartPointer<vtkPolyData>::New();
    meshData->SetPoints(nodes);
    meshData->SetPolys(triangles);

    vtkSmartPointer<vtkPolyDataMapper> meshMapper = vtkSmartPointer<vtkPolyDataMapper>::New();
    meshMapper->SetInputData(meshData);

    vtkSmartPointer<vtkActor> meshActor = vtkSmartPointer<vtkActor>::New();
    meshActor->SetMapper(meshMapper);

    renderer->AddActor(meshActor);


    ui.qvtkWidget->GetRenderWindow()->AddRenderer(renderer);

这里是Jsfiddle：https://fiddle.jshell.net/6puvsmn8/

Answer 2

您可以使用this article中描述的任何技术，它们还允许您对元素进行重新排序。最好的浏览器支持最简单：

li {
  display: table;
}

#group {
  display: table-header-group;
}

如何让我的li元素中的div首先出现在css中

2 个答案: