我正在尝试做一个非常简单的测验：
https://www.sitepoint.com/simple-javascript-quiz/
我试图让它更具响应性，并添加了这一行：
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
它工作得很好但是当我在每个问题的替代方案上添加一个长文本时，按钮＆＃34; Next Question＆＃34;只留在手机上（iphone 6，safari）。
我尝试添加z-index：1000;并没有改变：
button{
font-family: 'Work Sans', sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-bottom: 20px;
z-index:1000;
}
答案 0 :(得分：1)
所以，这里有一些问题。如上所述，您需要从public class WorkorderDialog extends Dialog {
private final JSONObject selectedOrder;
private final MapView googleMap;
private final Client client = Client.getInstance();
private final String renderedDate;
private final Bundle savedInstanceState;
private final Context context;
public WorkorderDialog(final @NonNull Context context, final JSONObject workorder, final String renderedDate, final Bundle savedInstanceState) {
super(context);
setContentView(R.layout.workorder_dialog);
this.context = context;
this.selectedOrder = workorder;
this.renderedDate = renderedDate;
this.savedInstanceState = savedInstanceState;
this.googleMap = (MapView) findViewById(R.id.locationMap);
}
public void constructDialog() {
final WindowManager.LayoutParams lp = new WindowManager.LayoutParams();
lp.copyFrom(getWindow().getAttributes());
lp.width = WindowManager.LayoutParams.MATCH_PARENT;
lp.height = WindowManager.LayoutParams.MATCH_PARENT;
getWindow().setAttributes(lp);
try {
final String startTime = new SimpleDateFormat("HH.mm").format(new Date(selectedOrder.getLong("start_time") * 1000L));
final String endTime = new SimpleDateFormat("HH.mm").format(new Date(selectedOrder.getLong("end_time") * 1000L));
final String essentialInfo = renderedDate + " - " + startTime + " - " + endTime;
final String title = selectedOrder.getJSONObject("client").getString("company");
final String description = selectedOrder.getString("description");
final String materials = JSONArrayUtil.sumProperty(selectedOrder.getJSONArray("materials"), "amount") + " materialen mee te nemen";
final JSONObject address = selectedOrder.getJSONObject("location").getJSONObject("adress");
final JSONObject contact = selectedOrder.getJSONObject("location").getJSONObject("contactperson");
final String locationNotes = address.has("notes") ?
("".equals(address.getString("notes")) || "null".equals(address.getString("notes")) ?
"Geen locatie beschrijving" : address.getString("notes")) : "Geen locatie beschrijving";
final String location = locationNotes + "\n" +
address.getString("street") + " " +
address.getString("number") + ", " +
address.getString("city");
final String contactPerson = contact.getString("first_name") + " " +
contact.getString("last_name") + "\n" +
contact.getString("phone");
((TextView) findViewById(R.id.dialogTitle)).setText(title);
((TextView) findViewById(R.id.locationText)).setText(location);
((TextView) findViewById(R.id.contactText)).setText(contactPerson);
((TextView) findViewById(R.id.dialogInfo)).setText(essentialInfo);
((TextView) findViewById(R.id.descriptionText)).setText(description);
((TextView) findViewById(R.id.materialsText)).setText(materials);
(findViewById(R.id.closeDialogButton)).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
dismiss();
}
});
if (!selectedOrder.has("localStatus") || (selectedOrder.has("localStatus") && selectedOrder.getInt("localStatus") != 3)) {
(findViewById(R.id.openWorkOrder)).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
final Intent openWorkOrder = new Intent(client.getCurrentActivity(), WorkOrderActivity.class);
final Bundle passedArguments = new Bundle();
try {
if (!selectedOrder.has("localStatus")) {
selectedOrder.put("localStatus", 1);
}
WorkOrderHandler.getInstance().setEditingWorkOrder(selectedOrder);
} catch (JSONException e) {
Log.e("CrafterException", e.getMessage());
}
passedArguments.putString("workorder", selectedOrder.toString());
openWorkOrder.putExtras(passedArguments);
client.getCurrentActivity().startActivity(openWorkOrder);
}
});
} else {
((ImageView) findViewById(R.id.openWorkOrder)).setImageResource(R.drawable.button_closed_workorder);
}
Mapbox.getInstance(getContext(), "pk.eyJ1IjoibWV0YWhleGFuZSIsImEiOiJjamFtYXE1Z3M0YmhoMndwN2lqZWp3aG91In0.VJrwxikM6yhPobgM59gl4g");
googleMap.onCreate(savedInstanceState);
if (!(address.get("lat") instanceof String) && !(address.get("lng") instanceof String)) {
final double lat = address.getDouble("lat");
final double lng = address.getDouble("lng");
googleMap.getMapAsync(new OnMapReadyCallback() {
@Override
public void onMapReady(MapboxMap mapboxMap) {
mapboxMap.addMarker(new MarkerOptions()
.position(new LatLng(lat, lng))
.icon(IconFactory.getInstance(getContext()).fromResource(R.drawable.ic_map)));
mapboxMap.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(lat, lng), 11));
mapboxMap.getUiSettings().setScrollGesturesEnabled(false);
mapboxMap.getUiSettings().setDoubleTapGesturesEnabled(false);
googleMap.onResume();
}
});
}
findViewById(R.id.constraintLayout10).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = null;
try {
intent = new Intent(Intent.ACTION_VIEW,
Uri.parse("https://www.google.com/maps/dir/?api=1&destination=" + address.getString("street") + "+" + address.getString("number") + "+" + address.getString("city")));
context.startActivity(intent);
} catch (JSONException e) {
Log.e("CrafterException", e.getMessage());
}
}
});
} catch (JSONException e) {
Log.e("CrafterException", e.getMessage());
}
}
@Override
protected void onStart() {
super.onStart();
if (googleMap != null) googleMap.onStart();
}
@Override
protected void onStop() {
super.onStop();
if (googleMap != null) googleMap.onStop();
}
@Override
public void dismiss() {
super.dismiss();
if (googleMap != null) googleMap.onDestroy();
}
public void onResume() {
if (googleMap != null) googleMap.onResume();
}
public void onPause() {
if (googleMap != null) googleMap.onPause();
}
public void onLowMemory() {
if (googleMap != null) googleMap.onLowMemory();
}
移除高度并从.quiz-container移除绝对定位。
我建议您将.slide添加到display: none;，然后将您的活动样式添加到slide - 这将正确显示按钮所在的位置。话虽如此，你将失去褪色效果。您需要添加this CSS才能取回它。希望这有帮助！
display:block答案 1 :(得分：0)
您将position: absolute设置为您的quizz问题，因此他们会忽略您在HTML中设置的每个元素的空间。
一个大的z-index只会将一个元素放在另一个元素之上，这就是为什么你看到按钮上方的quizz问题的原因。
如果您在移动设备屏幕上增加quiz-container的高度，则会解决此问题（尝试使用@media screen）。
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
我建议您找到另一种方法，将您的问题放在页面顶部，而不是使用position: absolute
答案 2 :(得分：0)
问题实际上是你的测验容器div有一个200px的固定高度，你不能让它流畅，因为你的幻灯片有位置：绝对，它会将它们从流中移除并防止父母相应地增加高度。
所以你需要重新思考如何解决这个问题。
一个有趣的方法是使用flexbox，控制哪个幻灯片显示order属性。
.quiz-container {
margin-top: 40px;
overflow: hidden;
}
#quiz{
display: flex;
}
.slide {
opacity: 0;
transition: opacity 0.5s;
/*gives each slide 100% width and prevents it from growing or shrinking*/
flex: 0 0 100%;
}
.active-slide {
opacity: 1;
/*sets the order to -1, so it's positioned before all other flex-items*/
order: -1;
}