CSS将中心div中留下的文本与自动换行符对齐
有很多非常相似的主题的答案，但没有一个能解决我的问题。
我想要的是一个水平项目列表（对于一个菜单），其中所有一起都是父项的100％宽度（对于我使用的#include "stdio.h"
#include "mpi.h"
#define N 500 /* number of rows and columns in matrix */
MPI_Status status;
double a[N][N],b[N][N],c[N][N]; //matrix used
main(int argc, char **argv){
struct timeval start, stop;
int numberOfTasks,
mtype,
taskID,
numberOfWorkers,
source,
destination,
rows,
averageRow,
extra,
offset,i,j,k;
//first initialization
MPI_Init(&argc, &argv);
MPI_Comm_rank(MPI_COMM_WORLD, &taskID);
MPI_Comm_size(MPI_COMM_WORLD, &numberOfTasks);
numberOfWorkers = numberOfTasks-1;
//---------------------------- master ----------------------------//
if (taskID == 0) {
for (i=0; i<N; i++) {
for (j=0; j<N; j++) {
a[i][j]= 1.0;
b[i][j]= 2.0;
}
}
/* send matrix data to the worker tasks */
gettimeofday(&start, 0);
averageRow = N/numberOfWorkers; //average rows per worker
extra= N%numberOfWorkers; //extra rows
offset = 0;
for (destination=1; destination<=numberOfWorkers; destination++){
if(destination<=extra){
rows = averageRow+1;
}else{
rows = averageRow;
}
mtype = 1;
MPI_Send(&offset, 1, MPI_INT, destination, mtype, MPI_COMM_WORLD);
MPI_Send(&rows, 1, MPI_INT, destination, mtype, MPI_COMM_WORLD);
MPI_Send(&a[offset][0], rows*N, MPI_DOUBLE,destination,mtype, MPI_COMM_WORLD);
MPI_Send(&b, N*N, MPI_DOUBLE, destination, mtype, MPI_COMM_WORLD);
offset = offset + rows;
}
/* wait for results from all worker tasks */
for (i=1; i<=numberOfWorkers; i++){
mtype = 2;
source = i;
MPI_Recv(&offset, 1, MPI_INT, source, mtype, MPI_COMM_WORLD, &status);
MPI_Recv(&rows, 1, MPI_INT, source, mtype, MPI_COMM_WORLD, &status);
MPI_Recv(&c[offset][0], rows*N, MPI_DOUBLE, source, mtype, MPI_COMM_WORLD, &status);
}
gettimeofday(&stop, 0);
printf("Upper Left = %6.2f Upper Right = %6.2f \n",c[0][0],c[0][N-1]);
printf("Lower Left = %6.2f Lower Right = %6.2f \n",c[N-1][0],c[N-1][N-1]);
fprintf(stdout,"Time = %.6f\n\n",(stop.tv_sec+stop.tv_usec*1e-6)-(start.tv_sec+start.tv_usec*1e-6));
}
/*---------------------------- worker----------------------------*/
if (taskID > 0) {
source = 0;
mtype = 1;
MPI_Recv(&offset, 1, MPI_INT, source, mtype, MPI_COMM_WORLD, &status);
MPI_Recv(&rows, 1, MPI_INT, source, mtype, MPI_COMM_WORLD, &status);
MPI_Recv(&a, rows*N, MPI_DOUBLE, source, mtype, MPI_COMM_WORLD, &status);
MPI_Recv(&b, N*N, MPI_DOUBLE, source, mtype, MPI_COMM_WORLD, &status);
/* Matrix multiplication */
for (k=0; k<N; k++)
for (i=0; i<rows; i++) {
c[i][k] = 0.0;
for (j=0; j<N; j++)
c[i][k] = c[i][k] + a[i][j] * b[j][k];
}
mtype = 2;
MPI_Send(&offset, 1, MPI_INT, 0, mtype, MPI_COMM_WORLD);
MPI_Send(&rows, 1, MPI_INT, 0, mtype, MPI_COMM_WORLD);
MPI_Send(&c, rows*N, MPI_DOUBLE, 0, mtype, MPI_COMM_WORLD);
}
MPI_Finalize();
} ）。
项目内的文字应该自动中断（没有flex，我事先不知道文本）左对齐然后破碎的框应该在项目的中间。悬停时（如示例所示），整个项目（包括填充）应更改背景颜色。
元素内部左右填充应通过此方法自动确定，以便菜单响应（在移动设备上，填充将为0或大屏幕相应更大）。
我还附上了一个简化的片段，其中包含了我所期望的最接近的结果。无论我更改html结构或css多少，我都无法在项目居中时保持对齐文本（这会覆盖左对齐）。
但是我不在乎结果是否完全不同，只要它在没有任何手动工作的情况下都可以工作：）。
我真的很感激任何帮助！谢谢！
<br /> * {
margin: 0;
padding: 0;
}
ul {
/* simulate small screen */
width: 500px;
display: flex;
list-style: none;
background: aqua;
}
ul li {
padding: 10px 0;
border-left: 1px solid red;
flex-grow: 1;
flex-shrink: 1;
text-align: center;
}
ul li div {
text-align: left;
margin: 0 auto;
}
ul li:hover {
background: yellow;
}
通缉的结果（第四个元素错误，图像用手固定以显示正确的结果）：
4 个答案:
答案 0 :(得分：0)
您可以使用诸如bootstrap之类的库来创建响应元素，也可以将元素放在一个具有屏幕宽度的表中，该表将为您处理定位和大小调整。
<table style="width: 100%">
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
</tr>
<table>
答案 1 :(得分：0)
希望这能回答你的问题
CSS
* {
margin: 0;
padding: 0;
}
ul {
/* simulate small screen */
width: 500px;
display: flex;
list-style: none;
background: aqua;
}
ul li {
padding: 10px 0;
border-left: 1px solid red;
flex-grow: 1;
flex-shrink: 1;
text-align: center;
}
ul li div {
text-align: center;
word-break: normal; // can use break-all for more aggressive style
margin: 0 auto;
}
ul li:hover {
background: yellow;
}
和HTML
<ul>
<li>
<div>Menu Item</div>
</li>
<li>
<div>Menu Item Name</div>
</li>
<li>
<div>Menu Item</div>
</li>
<li>
<div>Menu</div>
</li>
<li>
<div>Menu Item</div>
</li>
<li>
<div>Menu Item Name</div>
</li>
<li>
<div>Menu Item</div>
</li>
</ul>
答案 2 :(得分：0)
试着看一下flex-basis，结果就像你的照片一样。
* {
margin: 0;
padding: 0;
}
ul {
/* simulate small screen */
width: 500px;
display: flex;
list-style: none;
background: aqua;
}
ul li {
padding: 10px 0;
border-left: 1px solid red;
flex-grow: 1;
flex-shrink: 1;
// text-align: center;
justify-content:center;
display: flex;
}
ul li div {
text-align: left;
margin: 0 auto;
flex: 0 0 70%;
}
ul li:hover {
background: yellow;
}<ul>
<li>
<div>Menu Item</div>
</li>
<li>
<div>Menu Item Name</div>
</li>
<li>
<div>Menu Item</div>
</li>
<li>
<div>Menu</div>
</li>
<li>
<div>Menu Item</div>
</li>
<li>
<div>Menu Item Name</div>
</li>
<li>
<div>Menu Item</div>
</li>
</ul>
答案 3 :(得分：0)
这应该是它。
* {
margin: 0;
padding: 0;
}
ul {
/* simulate small screen */
width: 500px;
display: flex;
list-style: none;
background: aqua;
}
ul li {
padding: 10px 0;
border-left: 1px solid red;
flex-grow: 1;
flex-shrink: 1;
text-align: center;
}
ul li div {
text-align: left;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
}
ul li:hover {
background: yellow;
}<ul>
<li>
<div>Menu Item</div>
</li>
<li>
<div>Menu Item Name</div>
</li>
<li>
<div>Menu Item</div>
</li>
<li>
<div>Menu</div>
</li>
<li>
<div>Menu Item</div>
</li>
<li>
<div>Menu Item Name</div>
</li>
<li>
<div>Menu Item</div>
</li>
</ul>
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？